在vue中tokn持久化与统一注入

一、手动存储token

1、将token保存到vuex中

1、项目中，已经用了modules，直接在store/modules/user.js中定义token

• 在vuex中将token存到state中

const state = {
  token: '' // 共享token
}

const mutations = {
  // 对token进行赋值
  setToken(state, newToken) {
    state.token = newToken
  },

  // 移除token
  removeToken(state) {
    state.token = ''
  }
}

2、在登录页面调用 mutation 方法，将后端返回的 token 存到 vuex 的 state 中

通过实例方式调用 mutation 方法

handleLogin() {
      // 1、兜底验证
      // 在回调函数中，有一个形参 valid 就是指验证是否通过
      this.$refs.loginForm.validate(async valid => {
        if (valid) {
          // 登录时禁用登录按钮
          this.loading = true
          // 2、验证成功，发起请求
          const res = await login(this.loginForm)
          // console.log(res.data)   这是返回的 token

          // 通过实例方式调用 mutation 方法
          // this.$store.commit('vuex中的模块名/模块里面的方法', 传入的数据)
          this.$store.commit('user/setToken', res.data)

          // 3、请求成功以后，跳转
          this.$router.push('/')

          this.loading = false
        }
      })
    }

通过借助辅助函数方式

// 先引入
import { mapMutations } from 'vuex'

export default {
  methods: {
    // 第二个参数是数组，数组中放置方法名
    ...mapMutations('user', ['setToken']),

    handleLogin() {
      // 1、兜底验证
      // 在回调函数中，有一个形参 valid 就是指验证是否通过
      this.$refs.loginForm.validate(async valid => {
        if (valid) {
          // 登录时禁用登录按钮
          this.loading = true
          // 2、验证成功，发起请求
          const res = await login(this.loginForm)
          // console.log(res.data)  这是获取到的 token

          // 借助辅助函数方式
          this.setToken(res.data)

          // 3、请求成功以后，跳转
          this.$router.push('/')

          this.loading = false
        }
      })
    }
  }
}

  3、将登陆获取到的token统一注入到接口的请求头中 。

请求拦截器代码在文件src/utils/request.js中

• 引入 store

• 补充请求拦截器，代码逻辑是：

  • 如果当前 vuex中有 token，就在请求头中设置上

  • 因为后端返回的 token 没有添加上 Bearer 字符串，因此我们需要手动添加

  • authorization 和 Bearer 是本项目的后端接口要求的写法。 

import store from '@/store'
// 请求拦截器
service.interceptors.request.use(
  config => {
    console.log(config)
    // 先获取token
    const token = store.state.user.token

    // 判断是否存在token，如果存在，需要设置请求头
    if (token) {
      config.headers['Authorization'] = `Bearer ${token}`
    }
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

4、永久保存token

在`utils/auth.js`中，基础模板已经为我们提供了`获取token``设置token`，`删除token`这三个方法，可以直接使用

只需要将存储的key放置成特定值即可

// 导入 js-cookie，用来将数据存储到本地
import Cookies from 'js-cookie'

// 统一的 key
const TokenKey = 'vue_token'

// 获取 token
export function getToken() {
  return Cookies.get(TokenKey)
}

// 设置 token
export function setToken(token) {
  // key -- 名
  // token -- 值
  return Cookies.set(TokenKey, token)
}

// 删除本地存储的 token
export function removeToken() {
  return Cookies.remove(TokenKey)
}

2、在vuex中引入方法，并调用

在store/modules/user.js文件中

import { getToken, setToken, removeToken } from '@/utils/auth'

// 共享的数据
const state = {
  token: getToken() || ''// 用户 Token，默认为 空
}

// 操作数据的方法
const mutations = {
  // 对token进行赋值
  setToken(staye, newToken) {
    // 设置token
    state.token = newToken
    // 将token持久化存储到本地
    setToken(newToken)
  },
  // 移除token
  removeToken(state) {
    // 删除vuex的token
    state.token = ''
    // 删除本地token
    removeToken()
  }
}

二、使用插件自动存储vuex

实现步骤

1. 安装vuex-persistedstate 插件

2. vuex中准备user模块和cart模块

3. 将插件配置到vuex的plugins选项中，配置user模块和cart模块进行状态持久化

4. 修改state数据就会触发自动同步机制，修改一下数据检测是否同步成功

代码落地

1）安装一个vuex的插件vuex-persistedstate来支持vuex的状态持久化

npm i vuex-persistedstate

2）在src/store 文件夹下新建 modules 文件，在 modules 下新建 user.js 和 cart.js

src/store/modules/user.js

// 用户状态
export default {
  namespaced: true,
  state: () => ({
    // 个人用户信息
    profile:{
        id: '',
        nickname: '',
        avatar: '',
        token: '',
        mobile: '' 
    }
  })
}

src/store/modules/cart.js

// 购物车状态
export default {
  namespaced: true,
  state: () => ({
      list:[]
  })
}

3）在 src/store/index.js 中导入 user 和 cart 模块

import { createStore } from 'vuex'

import user from './modules/user'
import cart from './modules/cart'

export default createStore({
  modules: {
    user,
    cart
  }
})

4）使用vuex-persistedstate插件来进行持久化

import { createStore } from 'vuex'
import createPersistedstate from 'vuex-persistedstate'

import user from './modules/user'
import cart from './modules/cart'

export default createStore({
  modules: {
    user,
    cart
  },
  plugins: [
    createPersistedstate({
      key: 'erabbit-client-pc-store',
      paths: ['user', 'cart']
    })
  ]
})

插件说明

1. 默认是存储在localStorage中，可以对存储的方法进行自定义

2. key是存储数据的键名

3. paths是存储state中的那些数据，如果是模块下具体的数据需要加上模块名称，如user.token

4. 修改state中的数据即可触发同步机制，可以看到本地存储数据的的变化

测试效果

user模块定义一个mutation在main.js去调用下，观察浏览器application的localStorage下是否已经有了数据

src/store/modules/user.js

// 测试代码
mutations: {
    setUser (state) {
      state.profile.id = 10001
    }
}

src/main.js

store.commit('user/setUser')