登录状态储存

后端登录后返回访问令牌、刷新令牌、用户角色，采用 localStorage 本地存储方式，但基本每个页面都需要调用，如加载角色信息，根据角色显示界面，登录态管理等。

如果自己写一套函数打包，然后调用，耗时耗力。这是每个项目重复的工作，可使用 Vue Pinia 工具管理。

创建存储函数

创建变量

根据 pinia 模板，先创建 3 个变量，同时从 localStorage 读取初始化

state: () => ({
	accessToken: localStorage.getItem(ACCESS_TOKEN_KEY),
	refreshToken: localStorage.getItem(REFRESH_TOKEN_KEY),
	user: parseUser(localStorage.getItem(USER_KEY)),
}),

行为控制

创建四个函数

1. SetAuth() 当登录成功后保存返回的登录信息。
2. clear() 登出按钮可用
3. hasRole() 是不是该角色
4. hasAnyRole() 是否拥有任意一个角色

  actions: {
    setAuth(accessToken, refreshToken, user) {},
    clear() {},
    hasRole(role) {},
    hasAnyRole(…roles) {},
  },

setAuth()

setAuth(accessToken, refreshToken, user) {
      // 在 state 中存一份
      this.accessToken = accessToken
      this.refreshToken = refreshToken
      this.user = user
      // 本地存一份
      localStorage.setItem(ACCESS_TOKEN_KEY, accessToken)
      localStorage.setItem(REFRESH_TOKEN_KEY, refreshToken)
      localStorage.setItem(USER_KEY, JSON.stringify(user))
    },

获取派生状态

getters: {
	//判断是否存在登录
	isLoggedIn: (state) => !!state.accessToken,
},

getters 主要是对内部的变量进行派生计算，可以看到 isLoggedIn 是根据 state 内的变量产生的，不依赖外部变量，如果需要传入外部参数的，都应放到 actions 中

调用

在其他模块文件中导入，将函数赋值到常量中，可通过下面示例方式调用。

import { useAuthStore } from '@/stores/auth'
const auth = useAuthStore()
 
const user = auth.user
auth.clear()