Laravel Vue SPA - Vuex 管理登录状态
打赏作者

uighurbabbage

刚好需要的东西 辛苦了

dppppp

老师能不能解释一下如下这段代码啊?我去看官网的mapState辅助函数也没有看明白

computed:{
	...mapState({
		user:state=>state.AuthUser
	})
}
JellyBool 回复 dppppp

可以这样简单的理解:mapState 是 vuex 封装好的一个映射机制,将 user 映射到 state 里面的 authUser

dppppp 回复 JellyBool

ok 谢谢老师,顺便再问个问题,config.headers['Authorization'] = 'Bearer' + jwtToken.getToken();这个是做什么用的呢?

JellyBool 回复 dppppp

这个会自动提供 jwt token ,laravel 的 passport 就会做认证了

dppppp 回复 JellyBool

好的 ,谢谢老师,还有一个问题,希望老师不要觉得我麻烦哈,我看到在 store/modules 这里有两个模块。一个 auth-user 一个 login ,流程是 login.vue 里面发出的 dispatchlogin 模块 ,然后 login 模块 dispatchauth-user 为什么不直接 dispatchauth-user 呢?

JellyBool 回复 dppppp

其实是想做不一样的是,login 去做 jwt token 的保存,auth-user 就是更新用户的数据(state)的数据

juzai123

打印Store.state.authenticated 为undefined 请问是什么问题呢,代码是照着打的

juzai123

好吧 应该改为 Store.state.AuthUser.authenticated, 在视频8分38秒左右,记得更正哦

JellyBool 回复 juzai123

嗯,可以,我看了视频,确实是这样

liujun 回复 juzai123

我也很奇怪 没有加模块名竟然还能拿到数据

juzai123

action是异步处理的,在router.beforeEach中常常没有得到最新的值而跳转错误,所以我想改用同步的方法进行处理(说得太多了……)

人生就是挖坑埋自己

actions:{
setAuthUser({commit,dispatch}){
axios.get(’/api/user’).then(response =>{
commit({
type:types.SET_AUTH_USER,
user:response.data

            })
            console.log(874);
        })

    }

这个api 访问不了啊

JellyBool 回复 人生就是挖坑埋自己

这样我也不知道是什么原因

人生就是挖坑埋自己 回复 JellyBool

我把api文件的这个
Route::middleware(‘api’)->get(’/user’, function (Request $request) {
return $request ->user();}; 能通过了,但是获取不到email 和用户名

zhouxiaoshuai3 回复 人生就是挖坑埋自己

我也遇到这个API无法认证的问题了,这个问题你解决了嘛?

liyingxuan 回复 zhouxiaoshuai3

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

jimmyann 回复 liyingxuan

我也遇到这个问题 谢谢你的解决方案

kuoyeh2019 回复 liyingxuan

谢谢谢谢,一个空格,困扰我半天时间!

walkerpan 回复 人生就是挖坑埋自己

我也一直困惑在这里,最后转而去用jwt-auth解决了,凑巧可能你的问题是:axios.interceptors.request.use(function (config) { 这后面的jwt-token没有获取保存的access-token,,直接用window.localStorage.getItem(‘token’);代替试下

人生就是挖坑埋自己 回复 walkerpan

你说的对了,就是这个值为空 . 我试了window.localStorage.getItem(‘token’) 不行,需要在
jwt.js文件把
getToken(){
return window.localStorage.getItem(‘jwt_token’);
},
加个return

xiaoxiao521 回复 人生就是挖坑埋自己

你好,视频里面有 return 但我 的 依旧不现实 没有信息。到底怎么做的呀!

liyingxuan 回复 人生就是挖坑埋自己

这个有两个问题,一个是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)
})

不了了了了了之

非常棒的视频!

JellyBool 回复 不了了了了了之

可以,非常感谢支持

xhh1100

babelrc 的包为什么是 babel-plugin-transform-object-rest-spread ?

xhh1100

router.beforeEach((to, from, next) => {
    if (to.meta.requiresAuth) {
        if (Store.state.authenticated || JwtToken.getToken()) {
            return next()
        } else {
            return next({'name': 'login'})
        }
    }
    return next() // 视频中是不是少了这个,我的不加这个运行不了
})
JellyBool 回复 xhh1100

我去看了一下代码,貌似是有的

xhh1100 回复 JellyBool

在下个视频上有。。这个视频上没得。。。

liujun 回复 xhh1100

一开始好像是没写 准备看错误的 结果后面又写了 哈哈哈

Karthus

请问怎样可以让用户登录后右上角不会出现登录注册的文字,而是直接显示个人中心呢

JellyBool 回复 Karthus

你直接判断一下呗?视频是有这个部分的吧

Karthus 回复 JellyBool

我的意思是如何解决先显示登录注册过1秒再显示个人中心的闪现的那个问题

JellyBool 回复 Karthus

加个 loading 的状态试试?

yinchuanjiang

现在的vue版本不用配置babelrc了吗

JellyBool 回复 yinchuanjiang

看你用到那些语法,比如 …mapState 这些可能还要

yinchuanjiang 回复 JellyBool

但是我使用 …mapState 不配置babelrc也是可以的 是什么情况

JellyBool 回复 yinchuanjiang

那这样的话,可能是 mix 版本不一样,背后自己配置了

liujun

this.$store.state.module名.xxx—必须要加module名

Ericxie 回复 liujun

终于发现为什么console.log(state.authenticated)老是false,原来少了module名

Ericxie

老师,我已经在app.js添加了axios. interceptors,为什么会得到GET http://vue-spa.test/api/user 401 (Unauthorized)的报错?
我检查了请求头,里面的确带着 Authorization: Bearer [object Object]。问题出在哪里呢?@JellyBool

JellyBool 回复 Ericxie

Authorization: Bearer [object Object] 这个没给对 token 吧,这里应该是一个字符串才对

Ericxie 回复 JellyBool

谢谢老师,果然是token值不对。

DevTTL

老师 ,我只要把VUEX给NEW出来 ,浏览器就会报告这个错误 :

app.js:51752 Uncaught TypeError: WEBPACK_IMPORTED_MODULE_0_vuex.a is not a constructor
at Object…/resources/assets/js/store/index.js (app.js:51752)

错误截图 : https://l-x.ink/wp-content/uploads/2018/04/c6c7be22ddc0f6bb215db003403cdfef.png
代码截图 : https://l-x.ink/wp-content/uploads/2018/04/e43281b1794ac0da033959b1d6255746.png

JellyBool 回复 DevTTL
export default new Vuex.Store({

这样写?

阿麟v587

视频中老师store.state没加模块名,也就是评论中有人说了,只要axios请求加上AuthUser,即Store.state.AuthUser.authenticated就不用把请求加到action了,对应的authenticated状态就变成true,在topMenu中也要加上,我用...mapState()报错,直接改用用一个方法online(){return this.store.state.AuthUser.authenticated},v-if直接用online就可以了