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

问题是这样的,题主想要实现登录后跳转页面,在这个页面右上角显示用户的名称,像这样
image.png
然后我的思路是:
在登录成功之后使用localStorage存储服务器返回的token,紧接着!重点来了,不知道我这一步有没有做错,在我拿到了token之后,立马向服务器请求需带有token的用户信息接口,然后又使用localStorage存储从服务器返回的用户信息(userInfo),之后再跳转页面,在跳转的这个页面里去获取localStorage里的userInfo。然后,问题就出现了,第一次登录,有时候userInfo会是null,但有时候又有信息
image.png

然后,userInfo为null的时候,浏览器控制台输出以下信息
image.png

以下是我的代码,这是登录的代码

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的代码
image.png

data() {
    return {
      userInfo: JSON.parse(localStorage.getItem("userInfo"))
    };
  },

我在一个js文件里给请求头Authorization加了token字段了

axios.defaults.headers.common['Authorization'] = 'Bearer '+ localStorage.getItem('token');

我想实现的效果就是,在登录之后,跳转后的页面里能够获取到用户的名称!仅此而已,使用的是axios和Vue技术栈

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

最佳答案

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