所以，我正在使用laravel作为我的后端框架创建spa . 并在我使用 router.beforeEach 在vuejs vue-router中处理用户身份验证并且它可以工作，但它是一个非常基本的，我想添加更多的功能，但不知道从哪里开始...

所以这是我的vue-router代码

router.beforeEach((to, from, next) => {
    window.scrollTo(0, 0);
    if (to.fullPath !== "/login") {
        axios.get('/api/v1/profile').then(response => {       
            next();
        }).catch(error => {
            router.push('/login');
        })
    }else{
        next();
    }
});

它做的是我的spa页面中的每个路径都会发生变化，它会使用axios获取请求，如果返回的数据为true，那么它将继续进行，但如果为false，则会将用户返回到第一页

对于登录我使用这种代码

login() {
    this.$validator.validateAll().then((result) => {
        if(result){
            this.message.show = false;
            this.loading = true;
            axios.post('/login', {
                    username: this.username,
                    password: this.password
                })
                .then(response => {
                    this.$router.push('/');
                }).catch(error => {
                    this.message.show = true;
                    this.message.className = 'bg-danger';
                    if (error.response.status === 422) {
                        this.message.content = "Username atau password anda salah.";
                    } else {
                        this.message.content = error.response.data.message;
                    }
                    this.loading = false;
                });
                this.submited = false;
        }else{
            window.scrollTo(0, 0);
            this.submited = true;
        }
    });
}

我正在使用内置在auth logincontroller中的laravel进行登录，并使用此路由在Web中注销

Route::post('/login', 'Auth\LoginController@login');
Route::post('/logout', 'Auth\LoginController@logout');

在用户登录后，我的大多数水疗中心将与这种api路线互动，包括vue-router router.beforeEach axios get request

Route::group(['prefix'=>'v1','middleware'=>'auth:api'],function(){
  Route::get('/profile', 'UserController@getUser');
}

并在usercontroller getUser方法中我只是做这样的简单检查

public function userData(){
        $id = Auth::user()->getId();

        $kelas = User::with('pus','cu')->findOrFail($id);

        return response()
                ->json([
                        'model' => $kelas
                ]);
}

确保每个api请求来自经过身份验证的用户 .

所有上面的代码都运行得很好，但它是经过身份验证的用户的非常基本的方法，而在实际工作项目中有很多东西缺乏它，如：

  • 当我已经通过身份验证/登录后，我可以在我的地址栏中重新输入登录页面并显示登录页面并询问用户密码 . 它应该自动将用户重定向到主页或任何告诉用户他们已经登录并且无需重新输入用户名和密码的任何内容

  • laravel auth对于经过身份验证的用户有一个到期时间，对于已经闲置的用户，比如60秒，会话将超时，这意味着用户未经过身份验证 . 如果我在我的应用程序中导航，上面的代码工作正常，但如果我尝试做一些请求，如添加数据或其他没有导航到任何其他页面，在控制台中它将返回错误404.如何捕获该错误并重定向用户登录页面告诉会话超时....或者当laravel超时会话时，它会自动显示一些消息告诉重新登录或只是将它们重定向到登录页面 .

  • 在一个正在运行的Web应用程序中，将有用户权限和角色来确定每个用户可以做什么，并且't. i am using spatie laravel permission package to manage permission and roles. and i can expose those permission into vuex but how can i use those vuex permission to handle like user ' A ' that don't拥有文章页面的权限，然后vue-router将用户重定向到其他页面，告诉用户无法访问到那些页面或告诉用户该页面不存在 .

很抱歉多个问题，我想我把它全部放在这里，因为它将是一套解决方案 . 所以我希望任何人都可以给我一些方向如何在实际工作应用程序中处理vue-router，其中auth，permission，roles和其他东西是这些天应用程序的“必须” .

javascript php laravel vue.js vuejs2