问题是这样的,题主想要实现登录后跳转页面,在这个页面右上角显示用户的名称,像这样
然后我的思路是:
在登录成功之后使用localStorage存储服务器返回的token,紧接着!重点来了,不知道我这一步有没有做错,在我拿到了token之后,立马向服务器请求需带有token的用户信息接口,然后又使用localStorage存储从服务器返回的用户信息(userInfo),之后再跳转页面,在跳转的这个页面里去获取localStorage里的userInfo。然后,问题就出现了,第一次登录,有时候userInfo会是null,但有时候又有信息
然后,userInfo为null的时候,浏览器控制台输出以下信息
以下是我的代码,这是登录的代码
methods: {
//登录
login() {
postLogin(this.form).then((res) => {
if (res.status === 200) {
//存储token
localStorage.setItem("token", res.data.token);
//请求用户信息接口
getUserInfo().then((res) => {
console.log(res);
//设置localStorage存储用户信息
localStorage.setItem("userInfo", JSON.stringify(res.data));
//跳转至别的页面
this.$router.push("/");
});
}
});
},
},
这是获取localStorage的代码
data() {
return {
userInfo: JSON.parse(localStorage.getItem("userInfo"))
};
},
我在一个js文件里给请求头Authorization加了token字段了
axios.defaults.headers.common['Authorization'] = 'Bearer '+ localStorage.getItem('token');
我想实现的效果就是,在登录之后,跳转后的页面里能够获取到用户的名称!仅此而已,使用的是axios和Vue技术栈
折腾了一晚上,大佬们能告诉我哪里出了问题吗?
###axios.defaults.headers.common['Authorization'] = 'Bearer '+ localStorage.getItem('token');
可能是因为你这行代码只执行了一次,当你第一次进入页面是token字段为null,但是Authorization已经被赋值了,所以报401,当你二次刷新进入页面时,token实际上已经被赋值了,所以是正常的。建议使用axios的请求拦截器
axios.interceptors.request.use( (config) => {
config.headers['Authorization'] = 'Bearer '+ localStorage.getItem('token');
})
###页面右上角是一直在的吗?userInfo这个页面有被keepalive吗?localstorage是没有响应式的,如果不刷新实例是不会得到最新的data的
###我认为基本思路没什么大的逻辑问题
但其实在前后分离实际项目中,我们通常把Login写在store actions里
然后会在入口处引入一个路由全局拦截的文件router.beforeEach
用来判断每次请求的权限
如果没有登录(没有token),会直接拦截用户去登录。
通常我们也不将UserInfo存在LocalStorage中,因为前后分离的交互实质上类似无状态
交互,
每一次请求都可能得到新的用户修改信息,如果将用户信息缓存起来,我们就需要一个更新机制来做到在恰当的时间
更新存在localStorage的用户信息缓存,这样做无疑增加了系统的复杂性。
回到问题,你看到的控制台响应401和userInfo为null没有直接关系,这种401的响应一般是后端
对于前端未登录 或 权限不够的响应,所以这种响应应该只是单纯的token传递有误,或后端解析有误造成的,没有合法的token,当然请求不到用户信息接口,这两者应该是个因果关系,你可以从这方面检查一下你的项目。
最后建议你可以多学习参考比较优秀的开源项目,vue中的vue-element-admin 和 ant-design-vue-pro 都是比较优秀的