封装单独的登录接口(token存储的问题)

在单独请求模块中,单独封装登录接口

export function login(data) {
  // 返回一个axios对象 => promise  // 返回了一个promise对象
  return request({
    url: '/sys/login', // 因为所有的接口都要跨域 表示所有的接口要带 /api
    method: 'post',
    data
  })
}

封装Vuex的登录Action并处理token

• 在vuex中封装登录的action,并处理token
• 在vuex中加入对于用户的登录的处理
• 对于用户token这一高频使用的钥匙，我们需要让vuex来介入，将用户的token状态共享，更方便的读取，如图
  vuex中处理token.png
  实现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 = 'token' // 设定一个独一无二的key
export function getToken() {
  return Cookies.get(TokenKey)
}
export function setToken(token) {
export function removeToken() {
  return Cookies.remove(TokenKey)
}

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

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

提供修改token的mutations

// 修改状态
const mutations = {
  // 设置token
  setToken(state, token) {
    state.token = token // 设置token  只是修改state的数据  123 =》 1234
    // vuex变化 => 缓存数据
    setToken(token) // vuex和 缓存数据的同步
  },
  // 删除缓存
  removeToken(state) {
    state.token = null // 删除vuex的token
    removeToken() // 先清除 vuex  再清除缓存 vuex和 缓存数据的同步
  }
}

封装登录的Action

登录action要做的事情,调用登录接口,成功后设置token到vuex,失败则返回失败

// 执行异步
const actions = {
  // 定义login action  也需要参数 调用action时 传递过来的参数
  async login(context, data) {
    const result = await login(data) // 实际上就是一个promise  result就是执行的结果
    // axios默认给数据加了一层data
    if (result.data.success) {
      // 表示登录接口调用成功 也就是意味着你的用户名和密码是正确的
      // 现在有用户token
      // actions 修改state 必须通过mutations
      context.commit('setToken', result.data.data)
    }
  }
}

除此之外，为了更好的让其他模块和组件更好的获取token数据，我们可以在store/getters.js中将token值作为公共的访问属性放出

const getters = {
  sidebar: state => state.app.sidebar,
  device: state => state.app.device,
  token: state => state.user.token // 在根级的getters上 开发子模块的属性给别人看 给别人用
}
export default getters

image.png