feat: 完成登录页面接入pure

This commit is contained in:
橙子
2024-08-29 22:59:16 +08:00
parent 5f402488d4
commit bbe1a44788
9 changed files with 61 additions and 37 deletions

View File

@@ -15,7 +15,7 @@ VITE_APP_BASE_API = '/dev-api'
VITE_APP_BASE_WS = '/dev-ws' VITE_APP_BASE_WS = '/dev-ws'
#RBAC #RBAC
# VITE_APP_BASE_URL='http://localhost:19001/api' VITE_APP_BASE_URL='http://localhost:19001/api/app'
#长连接 #长连接
VITE_APP_BASE_URL_WS='http://localhost:19001/hub' VITE_APP_BASE_URL_WS='http://localhost:19001/hub'

View File

@@ -325,16 +325,13 @@ export default defineFakeRoute([
url: `/dev-api/get-async-routes`, url: `/dev-api/get-async-routes`,
method: "get", method: "get",
response: () => { response: () => {
return { return [
success: true, systemManagementRouter,
data: [ systemMonitorRouter,
systemManagementRouter, permissionRouter,
systemMonitorRouter, frameRouter,
permissionRouter, tabsRouter
frameRouter, ];
tabsRouter
]
};
} }
} }
]); ]);

View File

@@ -1,6 +1,6 @@
{ {
"Version": "5.8.0", "Version": "5.8.0",
"Title": "PureAdmin", "Title": "Yi-PureAdmin",
"FixedHeader": true, "FixedHeader": true,
"HiddenSideBar": false, "HiddenSideBar": false,
"MultiTagsCache": false, "MultiTagsCache": false,

View File

@@ -1,21 +1,32 @@
import { http } from "@/utils/http"; import { http } from "@/utils/http";
export type imageCaptcha = { export type imageCaptcha = {
//uuid status: number;
uuid: string; // 使用字符串表示 Guid data: {
//验证码图片字节数值 //uuid
img: Uint8Array | null; uuid: string; // 使用字符串表示 Guid
//验证码图片字节数值
img: Uint8Array | null;
};
};
export type LoginResult = {
status: number;
data: {
token: string;
refreshToken: string;
};
}; };
export type UserResult = { export type UserResult = {
success: boolean; status: number;
data: { data: {
/** 头像 */ /** 头像 */
avatar: string; avatar: string;
/** 用户名 */ /** 用户名 */
username: string; username: string;
/** 昵称 */ /** 昵称 */
nickname: string; nick: string;
/** 当前登录用户的角色 */ /** 当前登录用户的角色 */
roles: Array<string>; roles: Array<string>;
/** 按钮级别权限 */ /** 按钮级别权限 */
@@ -77,7 +88,11 @@ type ResultTable = {
/** 登录 */ /** 登录 */
export const getLogin = (data?: object) => { export const getLogin = (data?: object) => {
return http.request<UserResult>("post", "/account/login", { data }); return http.request<LoginResult>("post", "/account/login", { data });
};
export const getUserInfo = () => {
return http.request<UserResult>("get", "/account");
}; };
/** 获取验证码 */ /** 获取验证码 */

View File

@@ -11,6 +11,7 @@ import {
type UserResult, type UserResult,
type RefreshTokenResult, type RefreshTokenResult,
getLogin, getLogin,
getUserInfo,
refreshTokenApi refreshTokenApi
} from "@/api/user"; } from "@/api/user";
import { useMultiTagsStoreHook } from "./multiTags"; import { useMultiTagsStoreHook } from "./multiTags";
@@ -81,8 +82,23 @@ export const useUserStore = defineStore({
return new Promise<UserResult>((resolve, reject) => { return new Promise<UserResult>((resolve, reject) => {
getLogin(data) getLogin(data)
.then(data => { .then(data => {
if (data?.success) setToken(data.data); if (data.status == 200) {
resolve(data); const storeData: DataInfo<Date> = {
expires: undefined,
refreshToken: data.data.refreshToken,
accessToken: data.data.token
};
setToken(storeData);
getUserInfo().then(resInfo => {
storeData.username = resInfo.data.username;
storeData.avatar = resInfo.data.avatar;
storeData.nickname = resInfo.data.nick;
storeData.roles = resInfo.data.roles;
storeData.accessToken = resInfo.data.accessToken;
setToken(storeData);
resolve(resInfo);
});
}
}) })
.catch(error => { .catch(error => {
reject(error); reject(error);

View File

@@ -6,7 +6,6 @@ import Axios, {
import type { import type {
PureHttpError, PureHttpError,
RequestMethods, RequestMethods,
PureHttpResponse,
PureHttpRequestConfig PureHttpRequestConfig
} from "./types.d"; } from "./types.d";
import { stringify } from "qs"; import { stringify } from "qs";
@@ -120,20 +119,20 @@ class PureHttp {
private httpInterceptorsResponse(): void { private httpInterceptorsResponse(): void {
const instance = PureHttp.axiosInstance; const instance = PureHttp.axiosInstance;
instance.interceptors.response.use( instance.interceptors.response.use(
(response: PureHttpResponse) => { (response: any) => {
const $config = response.config; const $config = response.config;
// 关闭进度条动画 // 关闭进度条动画
NProgress.done(); NProgress.done();
// 优先判断post/get等方法是否传入回调否则执行初始化设置等回调 // 优先判断post/get等方法是否传入回调否则执行初始化设置等回调
if (typeof $config.beforeResponseCallback === "function") { if (typeof $config.beforeResponseCallback === "function") {
$config.beforeResponseCallback(response); $config.beforeResponseCallback(response);
return response.data; return response;
} }
if (PureHttp.initConfig.beforeResponseCallback) { if (PureHttp.initConfig.beforeResponseCallback) {
PureHttp.initConfig.beforeResponseCallback(response); PureHttp.initConfig.beforeResponseCallback(response);
return response.data; return response;
} }
return response.data; return response;
}, },
(error: PureHttpError) => { (error: PureHttpError) => {
const $error = error; const $error = error;

View File

@@ -68,8 +68,8 @@ const ruleForm = reactive({
//获取验证码 //获取验证码
const getCode = () => { const getCode = () => {
getCodeImg().then(res => { getCodeImg().then(res => {
codeUrl.value = "data:image/gif;base64," + res.img; codeUrl.value = "data:image/gif;base64," + res.data.img;
ruleForm.uuid = res.uuid; ruleForm.uuid = res.data.uuid;
}); });
}; };
@@ -81,10 +81,12 @@ const onLogin = async (formEl: FormInstance | undefined) => {
useUserStoreHook() useUserStoreHook()
.loginByUsername({ .loginByUsername({
username: ruleForm.username, username: ruleForm.username,
password: ruleForm.password password: ruleForm.password,
uuid: ruleForm.uuid,
code: ruleForm.verifyCode
}) })
.then(res => { .then(res => {
if (res.success) { if (res.status == 200) {
// 获取后端路由 // 获取后端路由
return initRouter().then(() => { return initRouter().then(() => {
disabled.value = true; disabled.value = true;
@@ -239,10 +241,10 @@ getCode();
:prefix-icon="useRenderIcon('ri:shield-keyhole-line')" :prefix-icon="useRenderIcon('ri:shield-keyhole-line')"
> >
<template v-slot:append> <template v-slot:append>
11 {{codeUrl}}
<img <img
:src="codeUrl" :src="codeUrl"
class="login-code-img" class="login-code-img"
alt=""
@click="getCode" @click="getCode"
/> />
</template> </template>

View File

@@ -2,7 +2,6 @@ import { reactive } from "vue";
import { isPhone } from "@pureadmin/utils"; import { isPhone } from "@pureadmin/utils";
import type { FormRules } from "element-plus"; import type { FormRules } from "element-plus";
import { $t, transformI18n } from "@/plugins/i18n"; import { $t, transformI18n } from "@/plugins/i18n";
import { useUserStoreHook } from "@/store/modules/user";
/** 6位数字验证码正则 */ /** 6位数字验证码正则 */
export const REGEXP_SIX = /^\d{6}$/; export const REGEXP_SIX = /^\d{6}$/;
@@ -32,10 +31,6 @@ const loginRules = reactive<FormRules>({
validator: (rule, value, callback) => { validator: (rule, value, callback) => {
if (value === "") { if (value === "") {
callback(new Error(transformI18n($t("login.pureVerifyCodeReg")))); callback(new Error(transformI18n($t("login.pureVerifyCodeReg"))));
} else if (useUserStoreHook().verifyCode !== value) {
callback(
new Error(transformI18n($t("login.pureVerifyCodeCorrectReg")))
);
} else { } else {
callback(); callback();
} }

View File

@@ -33,7 +33,7 @@ function onChange() {
useUserStoreHook() useUserStoreHook()
.loginByUsername({ username: username.value, password: "admin123" }) .loginByUsername({ username: username.value, password: "admin123" })
.then(res => { .then(res => {
if (res.success) { if (res.status == 200) {
storageLocal().removeItem("async-routes"); storageLocal().removeItem("async-routes");
usePermissionStoreHook().clearAllCachePage(); usePermissionStoreHook().clearAllCachePage();
initRouter(); initRouter();