diff --git a/.gitignore b/.gitignore index a1ebec91..e5f8f3b7 100644 --- a/.gitignore +++ b/.gitignore @@ -33,3 +33,7 @@ lerna-debug.log* # Use the PNPM package-lock.json yarn.lock + +# history + +.history diff --git a/src/router/permission.ts b/src/router/permission.ts index aeba45c9..8736d0fb 100644 --- a/src/router/permission.ts +++ b/src/router/permission.ts @@ -1,5 +1,6 @@ import router from "@/router" import { useUserStoreHook } from "@/store/modules/user" +import { useAuthStoreHook } from "@/store/modules/auth" import { usePermissionStoreHook } from "@/store/modules/permission" import { ElMessage } from "element-plus" import { setRouteChange } from "@/hooks/useRouteListener" @@ -18,6 +19,7 @@ router.beforeEach(async (to, _from, next) => { fixBlankPage() NProgress.start() const userStore = useUserStoreHook() + const authStore = useAuthStoreHook() const permissionStore = usePermissionStoreHook() const token = getToken() @@ -47,7 +49,7 @@ router.beforeEach(async (to, _from, next) => { try { if (routeSettings.async) { // 注意:角色必须是一个数组! 例如: ['admin'] 或 ['developer', 'editor'] - await userStore.getInfo() + await authStore.getInfo() const roles = userStore.roles // 根据角色生成可访问的 Routes(可访问路由 = 常驻路由 + 有访问权限的动态路由) permissionStore.setRoutes(roles) diff --git a/src/store/modules/auth.ts b/src/store/modules/auth.ts new file mode 100644 index 00000000..10e0e09b --- /dev/null +++ b/src/store/modules/auth.ts @@ -0,0 +1,38 @@ +import { defineStore } from "pinia" +import { useUserStore } from "./user" +import { loginApi, getUserInfoApi } from "@/api/login" +import { setToken } from "@/utils/cache/cookies" +import { type LoginRequestData } from "@/api/login/types/login" + +/** + * 用户认证状态管理 + */ +export const useAuthStore = defineStore("auth", () => { + const userStore = useUserStore() + + /** + * 用户登录 + * @param {LoginRequestData} loginData - 登录请求数据 + */ + const login = async (loginData: LoginRequestData) => { + const { data } = await loginApi(loginData) + userStore.token = data.token + setToken(data.token) + await getInfo() + } + + /** + * 获取用户信息 + */ + const getInfo = async () => { + const { data } = await getUserInfoApi() + userStore.username = data.username + userStore.roles = data.roles + } + + return { login, getInfo } +}) + +export function useAuthStoreHook() { + return useAuthStore() +} diff --git a/src/store/modules/user.ts b/src/store/modules/user.ts index 74d84a0c..5f8e6126 100644 --- a/src/store/modules/user.ts +++ b/src/store/modules/user.ts @@ -1,81 +1,51 @@ import { ref } from "vue" -import store from "@/store" import { defineStore } from "pinia" -import { usePermissionStore } from "./permission" -import { useTagsViewStore } from "./tags-view" -import { useSettingsStore } from "./settings" -import { getToken, removeToken, setToken } from "@/utils/cache/cookies" -import router, { resetRouter } from "@/router" -import { loginApi, getUserInfoApi } from "@/api/login" -import { type LoginRequestData } from "@/api/login/types/login" -import { type RouteRecordRaw } from "vue-router" -import routeSettings from "@/config/route" +import { getToken, removeToken } from "@/utils/cache/cookies" +import { resetRouter } from "@/router" +/** + * 用户状态管理 + */ export const useUserStore = defineStore("user", () => { + /** 用户的 token */ const token = ref(getToken() || "") + + /** 用户的角色 */ const roles = ref([]) + + /** 用户名 */ const username = ref("") - const permissionStore = usePermissionStore() - const tagsViewStore = useTagsViewStore() - const settingsStore = useSettingsStore() - - /** 设置角色数组 */ + /** + * 设置用户角色 + * @param {string[]} value - 角色列表 + */ const setRoles = (value: string[]) => { roles.value = value } - /** 登录 */ - const login = async ({ username, password, code }: LoginRequestData) => { - const { data } = await loginApi({ username, password, code }) - setToken(data.token) - token.value = data.token - } - /** 获取用户详情 */ - const getInfo = async () => { - const { data } = await getUserInfoApi() - username.value = data.username - // 验证返回的 roles 是否为一个非空数组,否则塞入一个没有任何作用的默认角色,防止路由守卫逻辑进入无限循环 - roles.value = data.roles?.length > 0 ? data.roles : routeSettings.defaultRoles - } - /** 切换角色 */ - const changeRoles = async (role: string) => { - const newToken = "token-" + role - token.value = newToken - setToken(newToken) - await getInfo() - permissionStore.setRoutes(roles.value) - resetRouter() - permissionStore.dynamicRoutes.forEach((item: RouteRecordRaw) => { - router.addRoute(item) - }) - _resetTagsView() - } - /** 登出 */ + + /** + * 用户登出 + */ const logout = () => { removeToken() token.value = "" roles.value = [] resetRouter() - _resetTagsView() } - /** 重置 Token */ + + /** + * 重置 token + */ const resetToken = () => { removeToken() token.value = "" roles.value = [] } - /** 重置 Visited Views 和 Cached Views */ - const _resetTagsView = () => { - if (!settingsStore.cacheTagsView) { - tagsViewStore.delAllVisitedViews() - tagsViewStore.delAllCachedViews() - } - } - return { token, roles, username, setRoles, login, getInfo, changeRoles, logout, resetToken } + return { token, roles, username, setRoles, logout, resetToken } }) -/** 在 setup 外使用 */ export function useUserStoreHook() { - return useUserStore(store) + return useUserStore() } diff --git a/src/views/login/index.vue b/src/views/login/index.vue index 45237490..493a41fd 100644 --- a/src/views/login/index.vue +++ b/src/views/login/index.vue @@ -1,7 +1,7 @@