黑马人资项目

封装Vuex的登录Action并处理token

目标在vuex中封装登录的action,并处理token

在这个小节中，我们将在vuex中加入对于用户的登录的处理

在Vuex中对token进行管理

在传统模式中，我们登录的逻辑很简单，如图

上图中，组件直接和接口打交道，这并没有什么问题，但是对于用户token这一高频使用的钥匙，我们需要让vuex来介入，将用户的token状态共享，更方便的读取，如图

实现store/modules/user.js基本配置

// 状态
const state = {}
// 修改状态
const mutations = {}
// 执行异步
const actions = {}
export default {
  namespaced: true,
  state,
  mutations,
  actions
}
​

设置token的共享状态

const state = {
  token: null
}

我们需要知道,钥匙不能每次都通过登录获取,我们可以将token放置到本地的缓存中

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

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

import Cookies from 'js-cookie'
​
const TokenKey = 'hrsaas-ihrm-token' // 设定一个独一无二的key
​
export function getToken() {
  return Cookies.get(TokenKey)
}
​
export function setToken(token) {
  return Cookies.set(TokenKey, token)
}
​
export function removeToken() {
  return Cookies.remove(TokenKey)
}
​

初始化token状态 - store/modules/user.js

import { getToken, setToken, removeToken } from '@/utils/auth'
// 状态
// 初始化的时候从缓存中读取状态 并赋值到初始化的状态上
// Vuex的持久化 如何实现 ？ Vuex和前端缓存相结合
const state &#