如何将token保存到vuex里面? && token持久化

一. Token 使用流程以及如何保存在vuex里面

1. 说明: 并不是所有的接口,都可以无限制请求的,在有些请求里面,需要权限的,

需要带上凭证

这里的token就相当于一把钥匙,我在发送请求的时候只要带上这把钥匙

它是后端接口提供的,一般用户登录成功,后端就会返回一个token给我们

                   **注意: 不带token的访问就会导致401的错误**<br />**       **![image.png](https://cdn.nlark.com/yuque/0/2021/png/21762447/1622984300110-b22ff4fc-8bb6-422a-8b2d-52a989d0f203.png#clientId=u42ca6171-01a5-4&from=paste&height=59&id=udbffd22a&margin=%5Bobject%20Object%5D&name=image.png&originHeight=59&originWidth=706&originalType=binary&ratio=1&size=17968&status=done&style=none&taskId=u14b5d9e5-e522-459d-b5b6-ec6a5eb9a5a&width=706)

2. Token的基本使用流程

用户登录，获取token；

保存token到本地；

发起其它请求，携带token (这一部分在axios请求拦截器中)

3. 如何将token保存到vuex里面 ? *

分析:

步骤1: 设置vuex(定义state,mutations,actions)

import {api里面定义的请求函数名} from '@/api/uer.js'
// 公共数据
state:{
  AAA:
},
// 定义mutations来修改数据
  mutations:{
    mSetTokenInfo(state,newInfo) {
    state.AAA = newInfo
    }
  },
 actions:{
   async BBB (context,参数) {
     try{
       // 获取信息
       const res = await api里面定义的请求函数名() {
        // 调用mutations 保存修改的数据
       context.commit('mutations模块名', 获取到的token) ***
       }
     } catch (err) {
       console.log(err)
     throw new Error(err)
   }
  } 
 }

步骤2: 调用actions 保存token值

省略其他....
await this.$store.dispatch('actions的名字BBB', 参数)

验证 : 在vue里面的vuex看看token值有没有保存进去

图示说明:

二:Token持久化

解释: 因为token在刷新页面的时候就消失了,在程序重新运行时,值才会恢复.

比如:在做登录功能 需要有token用户才能操作一些事情,但是每次一刷新页面,token值就没

了,一些功能也没了,又需要重新登录才能做下面的功能,就非常麻烦

持久化: 让页面刷新时,数据还在

解决思路:

1. 用户登录成功以后,保存token到vuex,同时也存一份到本地存储localstorage

2. 在vuex容器初始化时(页面刷新时),使用本地存储的值

图示说明:

步骤:

1. 封装localstorage存储模块 在src/utils/storage.js

// 封装localstorage对token(对象)的三个操作
const TOKEN-NAME = 'my-token'
// 1.保存
export const saveToken = (tokenObj) => {
  localStorage.setItem(TOKEN_NAME, JSON.stringify(tokenObj))
}
// 2. 获取
export const getToken = () => {
  return JSON.parse(localStorage.getItem(TOKEN_NAME))
}
// 3. 删除
export const delToken = () => {
  localStorage.removeItem(TOKEN_NAME)
}

2. token持久化 - 保存token

在调用登录接口,登录成功以后,服务器会返回token信息给我们

上面将token保存到了vuex里面,现在要做的事情就是把token持久到本地

代码:

省略其他...
+ import { setToken } from '../utils/storage.js'
export default new Vuex.Store({
  // 保存公共数据
  state: {
    tokenInfo: {}
  },
  // state中的数据要通过mutations才能修改
  mutations: {
    // mutation就是一个一个的函数, 第一个参数是当前的state, 第二个是载荷：要传入的数据
    mSetTokenInfo (state, newTokenInfo) {
     // 将token保存在了vuex中
      state.tokenInfo = newTokenInfo
     // 将token保存到本地localstorage  ***********
      setTokenObj(newTokenInfo)
    }
  },

3. token持久化 - 获取token

页面刷新,从localstorage中获取token

代码:

省略其他...
import { setToken，getToken } from '../utils/storage.js'
export default new Vuex.Store({
  // 保存公共数据
  state: {
    tokenInfo: getToken() || {}  // 获取token     ****
  },
  mutations: {
    mSetTokenInfo (state, newTokenInfo) {
      state.tokenInfo = newTokenInfo
      // 保存到本地localstorage        **********
      setTokenObj(newTokenInfo)
    }
  },

这个时候刷新页面,vuex中还有值就表示成功了

二. 登录-发送ajax请求做登录

预检请求:

注意: 在这里会有两次请求,有一个0KB的是预检请求(有点类似于一个跑腿的,帮你看看请求成功了没)