token 持久化及其封装

token 数据具有一定的时效时间，通常在几个小时，有效时间内无需重新获取。而基于 Redux 的存储方式又是基于内存的，刷新就会丢失。因此需要将 token 持久化处理。

// 封装存取方法

const TOKENKEY = 'token_key'

function setToken (token) {
  return localStorage.setItem(TOKENKEY, token)
}

function getToken () {
  return localStorage.getItem(TOKENKEY)
}

function clearToken () {
  return localStorage.removeItem(TOKENKEY)
}

export {
  setToken,
  getToken,
  clearToken
}

// 创建用户相关的小仓库
import { defineStore } from 'pinia';
// 引入接口
import { reqLogin, reqUserInfo, reqLogout } from '@/api/user';
// 引入数据类型
import type { UserState } from './types/type'
import { loginFormData, loginResponseData, userInfoResponseData } from '@/api/user/type'
// 引入操作本地存储的工具方法
import { SET_TOKEN, GET_TOKEN, REMOVE_TOKEN } from '@/utils/token';
// 引入常量路由，异步路由，任意路由
import { anyRoute, asyncRoute, constantRoute } from '@/router/routes';
// 引入路由组件
import router from '@/router';
// 引入深拷贝方法
// 忽略ts文件校验
// @ts-ignore
// import cloneDeep from 'lodash/cloneDeep';
// 用于过滤当前用户需要展示的异步路由
// function filterAsyncRoute(asyncRoute: any, routes: any) {
//   return asyncRoute.filter((item: any) => {
//     if (routes.includes(item.name)) {
//       if (item.children && item.children.length > 0) {
//         item.children = filterAsyncRoute(item.children, routes)
//       }
//       return true
//     }
//   })
// }
// 创建用户小仓库
const useUserStore = defineStore('User', {
  // 小仓库存储数据的地方
  state: (): UserState => {
    return {
      // 用户的唯一标识token
      token: GET_TOKEN(),
      // 仓库生成菜单需要数组（路由）
      menuRoutes: constantRoute,
      // 用户名
      username: '',
      // 用户头像
      avatar: '',
      // 存储当前用户是否拥有某一个按钮代表的功能的权限
      buttons: []
    };
  },
  // 异步或者逻辑的地方
  actions: {
    // 用户登录的方法
    async userLogin(data: loginFormData) {
      const result: loginResponseData = await reqLogin(data)

      if (result.code == 200) {
        // pinia 仓库存储一下 token
        this.token = (result.data as string)
        // 本地存储持久化存储一份
        SET_TOKEN(result.data as string)
        // 保证当前 async 函数返回一个成功的 promise
        return 'ok'
      } else {
        return Promise.reject(new Error(result.data))
      }
    },
    // 获取用户信息的方法
    async userInfo() {
      // 获取用户信息，存储到仓库中（用户头像，名字）
      let result: userInfoResponseData = await reqUserInfo()

      // 如果获取用户信息成功，就存储用户信息
      if (result.code == 200) {
        this.username = result.data.name
        this.avatar = result.data.avatar
        this.buttons = result.data.buttons
        // 计算当前用户需要展示的异步路由
        // let userAsyncRoute = filterAsyncRoute(cloneDeep(asyncRoute), result.data.routes)
        // 菜单需要的数据整理完毕
        // this.menuRoutes = [...constantRoute, ...userAsyncRoute, anyRoute]
        // 目前路由器管理的只有常量路由，之后计算完的异步路由和任意路由动态添加
        // [...userAsyncRoute, anyRoute].forEach((route: any) => {
        //   router.addRoute(route);
        // });
        // 打印当前用户全部的路由
        // console.log(router.getRoutes());

        return 'ok'
      } else {
        return Promise.reject(new Error(result.message))
      }
    },
    async userLogout() {
      const result: any = await reqLogout()
      if (result.code == 200) {
        // 目前没有mock接口，退出登录接口（通知服务器本地用户唯一标识失效）
        this.token = ''
        this.username = ''
        this.avatar = ''
        // 清除本地存储
        REMOVE_TOKEN()
        return 'ok'
      } else {
        return Promise.reject(new Error(result.message))
      }

    }
  },
  getters: {

  },
})
// 对外暴露小仓库的方法
export default useUserStore;