Question

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

所以这是我的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应用程序中，将有用户权限和角色来确定每个用户可以做什么和不能做什么。我正在使用spatie laravel权限包来管理权限和角色。我可以将这些权限暴露给vuex，但我如何使用这些vuex权限来处理没有文章页面权限的用户'A'，然后vue-router会将用户重定向到其他页面告诉用户没有访问这些页面或告诉用户页面不存在。

laravel auth with vue-router for spa

0 个答案: