Laravel API 接口开发（Sanctum）- 借助 localStorage 实现用户登录状态的维持

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方式

回复