liyingxuan

341 经验值

这里能用非email字段做登录名吗?

功能概述

SPA应用,后端是laravel5.5,前端vue全家桶。主要完成一个blog系统。

问题描述

后端使用了laravel-passport验证,在获取blog列表时,需要分未登录和登录的情况,前端根据spa教程中的:

    computed: {
      ...mapState({
        user: state => state.AuthUser,
        blog: state => state.BlogList
      })
    },
    ...
    // 判断是否登录,继而调用不同接口  
    if (this.user.authenticated) { } 

此时直接从blog列表进入单个blog的时候没有问题。
当刷新单篇blog的时候,获取验证状态还没结束,就已经调用未登录情况下获取blog列表的接口。

如何在各个子组件中,等待登录状态验证之后,再做后续操作?

我刚解决,后端主要是middleware('auth:api'),内容和路径无所谓,auth是用来验证的,否则$request ->user();取不到当期登录用户。前端是Bearer后一定要有一个空格,不然无法通过验证:config.headers['Authorization'] = 'Bearer' + ' ' + jwtToken.getToken()

这个有两个问题,一个是Laravel后端,路由需要这么写(注意中间件middleware):
Route::get('/user', function (Request $request) {

return $request->user();

})->middleware('auth:api');

然后是前端vue中axios.interceptors.request.use的地方(Bearer后一定要有一个空格):
axios.interceptors.request.use(function (config) {
if(jwtToken.getToken()) {

config.headers['Authorization'] = 'Bearer' + ' ' + jwtToken.getToken() // 注意这里一定要有一个空格,否则验证失败

}
return config
}, function (error) {
return Promise.reject(error)
})

create这个按照之前视频配置:
->middleware('api','cors');
以上这种只配置了app.php中的aliases的使用方式GET是没有问题,但是POST是会出现跨域问题的。

解决方法:在./app/Http/Kernel.php中的protected $middleware 中增加:
\Barryvdh\Cors\HandleCors::class,

就可以解决POST跨域问题了。