问答

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

作者:admin 2021-04-22 我要评论

问题是这样的,题主想要实现登录后跳转页面,在这个页面右上角显示用户的名称,像这样 然后我的思路是: 在登录成功之后使用localStorage存储服务器返回的token...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

问题是这样的,题主想要实现登录后跳转页面,在这个页面右上角显示用户的名称,像这样
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技术栈

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

###
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-adminant-design-vue-pro 都是比较优秀的

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • Vue为什么localStorage存储的用户信息

    Vue为什么localStorage存储的用户信息

  • vue-cli3项目生产和测试环境分包后文件

    vue-cli3项目生产和测试环境分包后文件

  • 【C语言小白】使用函数求余弦函数的近

    【C语言小白】使用函数求余弦函数的近

  • swiftui 中如何使用百度地图?

    swiftui 中如何使用百度地图?

腾讯云代理商
海外云服务器