H5W3
当前位置:H5W3 > 其他技术问题 > 正文

使用vuex保存用户登录状态时遇到的一个问题

问题:

我做的是一个商城项目,说来话长,由于种种原因,用户登录态得靠我前端来保存,日了狗啊。现在的做法是:在入口文件(main.js)发起一个请求,根据返回的结果判断用户是否合法,合法的话就在设置store.state.userStatus:true,否则为false,然后后续的组件都根据store.state.userStatus做出判断。

一切都挺顺利的,直到刷新浏览器,由于接口是xhr请求,异步,所以如果我在个人中心组件刷新浏览器,得到的是store.state.userStatus的初始值,并不是根据接口判断后设置的值,这就有问题了。。。

我怀疑能不能用vuex保存用户的登录态,如果能,应该怎么操作呢?如果不能,那前端怎么保存用户登录态才比较妥善呢?

回答:

你可以在根实例的created回调中发起异步请求,获取到状态之前显示loading,获取到状态后再根据结果显示业务组件或者路由跳转

回答:

用vuex的话,浏览器一刷新状态都没了,还是要利用cookie或localStorage。

最近也被要求用前端来作权限拦截/登录/退出处理,找到了一个库 vue-auth,还不错,其实就是通过本地储存校验每次请求的token,不通过就可让它跳转到login页。逻辑方便定制,例:

import VueAuth from '@websanova/vue-auth'

Vue.use(VueAuth, {
  auth: {
    request: function (req) {},
    response: function (res) {
      if (res.data.status !== 1) return res.data
    }
  },
  http: {
    ...require('@websanova/vue-auth/drivers/http/axios.1.x.js'),
    _invalidToken: function (res) {
      if (res.data.status === 2) this.logout()
    }
  },
  router: require('@websanova/vue-auth/drivers/router/vue-router.2.x.js'),
  loginData: { url: 'login', method: 'POST', fetchUser: false },
  logoutData: { url: 'logout', redirect: 'login' },
  fetchData: { enabled: false },
  refreshData: { enabled: false }
})

回答:

你的登录状态是基于token还是基于cookie的?
基于token就在拿到token之后保存到localStorage里面或者cookies里面,下次用的时候,有token,并且没过期就是已经登录了,没有token就是没登录

回答:

vuex刷新以后确实会清空数据,得到的是初始值,所以这个地方你这种处理方式是不行的。你一个true或者false的状态用sessionStorage不就行了,为什么非要存vuex

回答:

vuex像普通的js变量一样存在内存中,刷新就会消失。所以还是要本地存储什么的来解决。

回答:

localStorage 保存

本文地址:H5W3 » 使用vuex保存用户登录状态时遇到的一个问题

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址