Vue为什么localStorage存储的用户信息有时候会取不出来

Question

问题是这样的，题主想要实现登录后跳转页面，在这个页面右上角显示用户的名称，像这样

然后我的思路是：
在登录成功之后使用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技术栈

折腾了一晚上，大佬们能告诉我哪里出了问题吗？

Answer 1

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');
})

Answer 2

页面右上角是一直在的吗？userInfo这个页面有被keepalive吗？localstorage是没有响应式的，如果不刷新实例是不会得到最新的data的

Answer 3

我认为基本思路没什么大的逻辑问题
但其实在前后分离实际项目中，我们通常把Login写在store actions里
然后会在入口处引入一个路由全局拦截的文件router.beforeEach 用来判断每次请求的权限
如果没有登录（没有token），会直接拦截用户去登录。
通常我们也不将UserInfo存在LocalStorage中，因为前后分离的交互实质上类似无状态交互，
每一次请求都可能得到新的用户修改信息，如果将用户信息缓存起来，我们就需要一个更新机制来做到在恰当的时间更新存在localStorage的用户信息缓存，这样做无疑增加了系统的复杂性。

回到问题，你看到的控制台响应401和userInfo为null没有直接关系，这种401的响应一般是后端
对于前端未登录 或 权限不够的响应，所以这种响应应该只是单纯的token传递有误，或后端解析有误造成的，没有合法的token，当然请求不到用户信息接口，这两者应该是个因果关系，你可以从这方面检查一下你的项目。

最后建议你可以多学习参考比较优秀的开源项目，vue中的vue-element-admin 和 ant-design-vue-pro 都是比较优秀的