2022-05-09 23:51:19 +08:00
|
|
|
import { unref } from 'vue';
|
2021-08-13 14:22:35 +08:00
|
|
|
import { defineStore } from 'pinia';
|
2022-05-09 23:51:19 +08:00
|
|
|
import { router } from '@/router';
|
2022-01-05 01:35:32 +08:00
|
|
|
import { fetchLogin, fetchUserInfo } from '@/service';
|
2022-07-16 00:13:19 +08:00
|
|
|
import { useRouterPush } from '@/composables';
|
2022-11-17 01:47:06 +08:00
|
|
|
import { localStg } from '@/utils';
|
2022-04-29 02:00:51 +08:00
|
|
|
import { useTabStore } from '../tab';
|
|
|
|
import { useRouteStore } from '../route';
|
2022-11-17 01:47:06 +08:00
|
|
|
import { getToken, getUserInfo, clearAuthStorage } from './helpers';
|
2021-05-29 03:02:15 +08:00
|
|
|
|
2022-01-16 20:13:11 +08:00
|
|
|
interface AuthState {
|
2021-08-13 14:22:35 +08:00
|
|
|
/** 用户信息 */
|
2022-01-03 22:20:10 +08:00
|
|
|
userInfo: Auth.UserInfo;
|
|
|
|
/** 用户token */
|
2022-01-16 20:13:11 +08:00
|
|
|
token: string;
|
2022-01-05 01:35:32 +08:00
|
|
|
/** 登录的加载状态 */
|
2022-04-13 23:45:15 +08:00
|
|
|
loginLoading: boolean;
|
2021-05-29 03:02:15 +08:00
|
|
|
}
|
|
|
|
|
2022-01-16 20:13:11 +08:00
|
|
|
export const useAuthStore = defineStore('auth-store', {
|
|
|
|
state: (): AuthState => ({
|
|
|
|
userInfo: getUserInfo(),
|
|
|
|
token: getToken(),
|
2022-04-13 23:45:15 +08:00
|
|
|
loginLoading: false
|
2022-01-16 20:13:11 +08:00
|
|
|
}),
|
|
|
|
getters: {
|
|
|
|
/** 是否登录 */
|
|
|
|
isLogin(state) {
|
|
|
|
return Boolean(state.token);
|
2022-04-01 14:47:57 +08:00
|
|
|
}
|
2022-01-16 20:13:11 +08:00
|
|
|
},
|
|
|
|
actions: {
|
|
|
|
/** 重置auth状态 */
|
|
|
|
resetAuthStore() {
|
|
|
|
const { toLogin } = useRouterPush(false);
|
2022-04-29 02:00:51 +08:00
|
|
|
const { resetTabStore } = useTabStore();
|
|
|
|
const { resetRouteStore } = useRouteStore();
|
2022-05-09 23:51:19 +08:00
|
|
|
const route = unref(router.currentRoute);
|
2022-01-09 13:25:42 +08:00
|
|
|
|
2022-01-16 20:13:11 +08:00
|
|
|
clearAuthStorage();
|
|
|
|
this.$reset();
|
2022-01-09 13:25:42 +08:00
|
|
|
|
2022-05-09 23:51:19 +08:00
|
|
|
resetTabStore();
|
|
|
|
resetRouteStore();
|
|
|
|
|
2022-01-16 20:13:11 +08:00
|
|
|
if (route.meta.requiresAuth) {
|
|
|
|
toLogin();
|
|
|
|
}
|
2022-05-09 23:51:19 +08:00
|
|
|
},
|
|
|
|
/**
|
|
|
|
* 处理登录后成功或失败的逻辑
|
|
|
|
* @param backendToken - 返回的token
|
|
|
|
*/
|
|
|
|
async handleActionAfterLogin(backendToken: ApiAuth.Token) {
|
2022-11-17 22:54:45 +08:00
|
|
|
const route = useRouteStore();
|
2022-05-09 23:51:19 +08:00
|
|
|
const { toLoginRedirect } = useRouterPush(false);
|
2022-04-29 02:00:51 +08:00
|
|
|
|
2022-05-09 23:51:19 +08:00
|
|
|
const loginSuccess = await this.loginByToken(backendToken);
|
|
|
|
|
|
|
|
if (loginSuccess) {
|
|
|
|
// 跳转登录后的地址
|
|
|
|
toLoginRedirect();
|
|
|
|
|
|
|
|
// 登录成功弹出欢迎提示
|
2022-11-17 22:54:45 +08:00
|
|
|
if (route.isInitAuthRoute) {
|
|
|
|
window.$notification?.success({
|
|
|
|
title: '登录成功!',
|
|
|
|
content: `欢迎回来,${this.userInfo.userName}!`,
|
|
|
|
duration: 3000
|
|
|
|
});
|
|
|
|
}
|
2022-05-09 23:51:19 +08:00
|
|
|
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
// 不成功则重置状态
|
|
|
|
this.resetAuthStore();
|
2022-01-16 20:13:11 +08:00
|
|
|
},
|
|
|
|
/**
|
|
|
|
* 根据token进行登录
|
|
|
|
* @param backendToken - 返回的token
|
|
|
|
*/
|
|
|
|
async loginByToken(backendToken: ApiAuth.Token) {
|
2022-05-09 23:51:19 +08:00
|
|
|
let successFlag = false;
|
2022-01-05 01:35:32 +08:00
|
|
|
|
2022-04-29 02:00:51 +08:00
|
|
|
// 先把token存储到缓存中(后面接口的请求头需要token)
|
2022-01-16 20:13:11 +08:00
|
|
|
const { token, refreshToken } = backendToken;
|
2022-11-17 01:47:06 +08:00
|
|
|
localStg.set('token', token);
|
|
|
|
localStg.set('refreshToken', refreshToken);
|
2022-01-05 01:35:32 +08:00
|
|
|
|
2022-01-16 20:13:11 +08:00
|
|
|
// 获取用户信息
|
|
|
|
const { data } = await fetchUserInfo();
|
|
|
|
if (data) {
|
|
|
|
// 成功后把用户信息存储到缓存中
|
2022-11-17 01:47:06 +08:00
|
|
|
localStg.set('userInfo', data);
|
2022-01-05 01:35:32 +08:00
|
|
|
|
2022-01-16 20:13:11 +08:00
|
|
|
// 更新状态
|
2022-05-09 20:46:27 +08:00
|
|
|
this.userInfo = data;
|
|
|
|
this.token = token;
|
2022-01-05 01:35:32 +08:00
|
|
|
|
2022-05-09 23:51:19 +08:00
|
|
|
successFlag = true;
|
2022-01-16 20:13:11 +08:00
|
|
|
}
|
2022-05-09 23:51:19 +08:00
|
|
|
|
|
|
|
return successFlag;
|
2022-01-16 20:13:11 +08:00
|
|
|
},
|
|
|
|
/**
|
|
|
|
* 登录
|
2022-04-29 02:00:51 +08:00
|
|
|
* @param userName - 用户名
|
|
|
|
* @param password - 密码
|
2022-01-16 20:13:11 +08:00
|
|
|
*/
|
2022-04-29 02:00:51 +08:00
|
|
|
async login(userName: string, password: string) {
|
2022-04-13 23:45:15 +08:00
|
|
|
this.loginLoading = true;
|
2022-04-29 02:00:51 +08:00
|
|
|
const { data } = await fetchLogin(userName, password);
|
2022-01-16 20:13:11 +08:00
|
|
|
if (data) {
|
2022-05-09 23:51:19 +08:00
|
|
|
await this.handleActionAfterLogin(data);
|
2022-01-16 20:13:11 +08:00
|
|
|
}
|
2022-04-13 23:45:15 +08:00
|
|
|
this.loginLoading = false;
|
2022-04-23 02:21:02 +08:00
|
|
|
},
|
2022-05-09 23:51:19 +08:00
|
|
|
/**
|
|
|
|
* 更换用户权限(切换账号)
|
|
|
|
* @param userRole
|
|
|
|
*/
|
|
|
|
async updateUserRole(userRole: Auth.RoleType) {
|
|
|
|
const { resetRouteStore, initAuthRoute } = useRouteStore();
|
|
|
|
|
|
|
|
const accounts: Record<Auth.RoleType, { userName: string; password: string }> = {
|
|
|
|
super: {
|
|
|
|
userName: 'Super',
|
|
|
|
password: 'super123'
|
|
|
|
},
|
|
|
|
admin: {
|
|
|
|
userName: 'Admin',
|
|
|
|
password: 'admin123'
|
|
|
|
},
|
|
|
|
user: {
|
|
|
|
userName: 'User01',
|
|
|
|
password: 'user01123'
|
|
|
|
}
|
|
|
|
};
|
|
|
|
const { userName, password } = accounts[userRole];
|
|
|
|
const { data } = await fetchLogin(userName, password);
|
|
|
|
if (data) {
|
|
|
|
await this.loginByToken(data);
|
|
|
|
resetRouteStore();
|
|
|
|
initAuthRoute();
|
|
|
|
}
|
2022-04-01 14:47:57 +08:00
|
|
|
}
|
|
|
|
}
|
2022-01-03 22:20:10 +08:00
|
|
|
});
|