付费课程, 订阅后即可观看
Laravel API 接口开发 (Sanctum Vue)
13 集视频
1小时34分钟
本期 Laravel Sanctum API 接口开发 Vue SPA 单页应用视频课程咱们看一看如何实现用户登录状态的维持，之前咱们已经可以登录用户，并且将用户的信息保存到vuex中，但是数据的持久性问题仍然没有解决，本期视频咱们就看一看如何构建一套机制实现用户状态的持久化。
微信扫码登录
使用的是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 不知为何？
你就好好检查一下 localstorage 的数据是否保存成功，提取的时候是否提取成功吧，打 log 跟踪一下，这两项没问题的话，应该是没事的
确认 localstorage 数据保存成功了，确认是捕捉到错误， localStorage.removeItem('token');
chorme console中 提示错误：
POST http://lanyi-backend.test/api/v1/details 401 (Unauthorized)
而且是一打开页面就提示上面的错误。不知何故？还请授业解惑：）
还是权限不对啊，你确定一下两个问题，一个是这里的 token.access_token 是不是传递了正确的access token 'Authorization': 'Bearer ' + token.access_token 另一个问题是接口路由那里你使用的middleware是不是正确的，如果你使用更是passport，那middleware你得改。
最后接口的请求类型是否匹配好了，你这里显示的POST，但是你请求的时候你使用的是get方式