正在播放:Laravel API 接口开发(Sanctum)- 借助 localStorage 实现用户登录状态的维持
更新时间:9个月前
Laravel API 接口开发 (Sanctum Vue)

boxer 2020-06-14 22:06:55
使用的是Laravel passport , token 为 json 格式,包含token_type, access_token, refresh_token 等; 在main.js 中使用: store.dispatch('auth/userInfo',JSON.stringify(localStorage.getItem('token'))) 在auth.js中使用: async userInfo({commit,state}, token) { commit('SET_TOKEN', token); if (!localStorage.getItem('token')){ localStorage.setItem('token',JSON.stringify(token)); token = JSON.parse(localStorage.getItem('token')); //console.log(token) } if (!state.token){ return ; } //清求后台用户信息接口,获取用户信息 try { let response = await axios.get('details', { headers: { 'Authorization': 'Bearer ' + token.access_token } }); // console.log(response.data) commit('SET_USER', response.data) } catch (e) { commit('SET_TOKEN', null); commit('SET_USER', null); localStorage.removeItem('token'); } } 目前token(json)格式能存于localstorage中,但页面一旦刷新,localstorage 中的token 仍变为null 不知为何?

codinget 2020-06-14 23:07:35
你就好好检查一下 localstorage 的数据是否保存成功,提取的时候是否提取成功吧,打 log 跟踪一下,这两项没问题的话,应该是没事的

boxer 2020-06-14 23:19:54
确认 localstorage 数据保存成功了,确认是捕捉到错误, localStorage.removeItem('token'); chorme console中 提示错误: POST http://lanyi-backend.test/api/v1/details 401 (Unauthorized) 而且是一打开页面就提示上面的错误。不知何故?还请授业解惑:)

codinget 2020-06-14 23:28:48
还是权限不对啊,你确定一下两个问题,一个是这里的 token.access_token 是不是传递了正确的access token 'Authorization': 'Bearer ' + token.access_token 另一个问题是接口路由那里你使用的middleware是不是正确的,如果你使用更是passport,那middleware你得改。 最后接口的请求类型是否匹配好了,你这里显示的POST,但是你请求的时候你使用的是get方式
暂无相关资源