关于Vue项目中,登录请求使用Vuex处理返回的token值

描述:但我们在做一个用户登录功能时,向服务器发送完登录请求,成功后;服务器会返回我们一个token值来保存到本地储存中.一般我们都会将返回的token值保存到本地存储 localstorage中

Token 是用户登录成功之后服务端返回的一个身份令牌，在项目中的多个业务中需要使用到：

• 访问需要授权的 API 接口
• 校验页面的访问权限
• …

但是我们只有在第一次用户登录成功之后才能拿到 Token。

所以为了能在其它模块中获取到 Token 数据，我们需要把它存储到一个公共的位置，方便随时取用。

往哪儿存？

• 本地存储
  • 获取麻烦
  • 数据不是响应式
• Vuex 容器（推荐）
  • 获取方便
  • 响应式的

1.那么将token值保存在vuex中
1.)首先,导入相关文件,生成vuex结构
2.)在state中声明保存token的变量
3.)在mutation中,对变量进行赋值(将服务器返回的token值赋值给声明的变量)

2.在写登录功能的代码中,导入vuex文件,在请求成功下面调用vuex中的方法

**此时在浏览器控制台的vuex插件中可以看到已经将token值保存在vuex中

**这里有一个小问题:虽然将token保存在vuex中,在浏览器中也可以看到;但是页面一刷新,vuex中保存的token值就会消失,变成空的,就是因为没有做到持久化保存

那么要解决这个问题,我们既要存在vuex中,也要存在本地储存localstorage中,但是为了保证vuex文件的纯净,代码不显得臃肿,我们将本地储存的代码再次封装到一个js文件中.

这里导出了两个方法,分别是把存储token和读取token
然后回到vuex文件中

综上:不仅将服务器返回的token值保存到vuex中,实现数据的响应式也方便了数据的随时取用,同时也持久化的储存了token值