feat: 逻辑完善,对接后端菜单接口完成
This commit is contained in:
parent
9f1b4ed85b
commit
43517f9c3f
@ -1,10 +1,6 @@
|
|||||||
import { http } from "@/utils/http";
|
import { http } from "@/utils/http";
|
||||||
|
import { BaseResponse } from "@/api/base";
|
||||||
type Result = {
|
|
||||||
success: boolean;
|
|
||||||
data: Array<any>;
|
|
||||||
};
|
|
||||||
|
|
||||||
export const getAsyncRoutes = () => {
|
export const getAsyncRoutes = () => {
|
||||||
return http.request<Result>("get", "/getAsyncRoutes");
|
return http.request<BaseResponse<Array<any>>>("get", "/admin/v1/menu/self");
|
||||||
};
|
};
|
||||||
|
@ -8,7 +8,15 @@ import { addIcon } from "@iconify/vue/dist/offline";
|
|||||||
import HomeFilled from "@iconify-icons/ep/home-filled";
|
import HomeFilled from "@iconify-icons/ep/home-filled";
|
||||||
import InformationLine from "@iconify-icons/ri/information-line";
|
import InformationLine from "@iconify-icons/ri/information-line";
|
||||||
import Lollipop from "@iconify-icons/ep/lollipop";
|
import Lollipop from "@iconify-icons/ep/lollipop";
|
||||||
|
import Tools from "@iconify-icons/ep/tools";
|
||||||
|
import User from "@iconify-icons/ep/user";
|
||||||
|
import Guide from "@iconify-icons/ep/guide";
|
||||||
|
import View from "@iconify-icons/ep/view";
|
||||||
|
|
||||||
addIcon("homeFilled", HomeFilled);
|
addIcon("homeFilled", HomeFilled);
|
||||||
addIcon("informationLine", InformationLine);
|
addIcon("informationLine", InformationLine);
|
||||||
addIcon("lollipop", Lollipop);
|
addIcon("lollipop", Lollipop);
|
||||||
|
addIcon("tools", Tools);
|
||||||
|
addIcon("user", User);
|
||||||
|
addIcon("guide", Guide);
|
||||||
|
addIcon("view", View);
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
// import "@/utils/sso";
|
// import "@/utils/sso";
|
||||||
import { getConfig } from "@/config";
|
import { getConfig } from "@/config";
|
||||||
import NProgress from "@/utils/progress";
|
import NProgress from "@/utils/progress";
|
||||||
import { sessionKey, type DataInfo } from "@/utils/auth";
|
import { sessionKey } from "@/utils/auth";
|
||||||
import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
|
import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
|
||||||
import { usePermissionStoreHook } from "@/store/modules/permission";
|
import { usePermissionStoreHook } from "@/store/modules/permission";
|
||||||
import {
|
import {
|
||||||
@ -25,6 +25,7 @@ import { buildHierarchyTree } from "@/utils/tree";
|
|||||||
import { isUrl, openLink, storageSession, isAllEmpty } from "@pureadmin/utils";
|
import { isUrl, openLink, storageSession, isAllEmpty } from "@pureadmin/utils";
|
||||||
|
|
||||||
import remainingRouter from "./modules/remaining";
|
import remainingRouter from "./modules/remaining";
|
||||||
|
import { LoginResult } from "@/api/login";
|
||||||
|
|
||||||
/** 自动导入全部静态路由,无需再手动引入!匹配 src/router/modules 目录(任何嵌套级别)中具有 .ts 扩展名的所有文件,除了 remaining.ts 文件
|
/** 自动导入全部静态路由,无需再手动引入!匹配 src/router/modules 目录(任何嵌套级别)中具有 .ts 扩展名的所有文件,除了 remaining.ts 文件
|
||||||
* 如何匹配所有文件请看:https://github.com/mrmlnc/fast-glob#basic-syntax
|
* 如何匹配所有文件请看:https://github.com/mrmlnc/fast-glob#basic-syntax
|
||||||
@ -108,7 +109,7 @@ router.beforeEach((to: ToRouteType, _from, next) => {
|
|||||||
handleAliveRoute(to);
|
handleAliveRoute(to);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
const userInfo = storageSession().getItem<DataInfo<number>>(sessionKey);
|
const userInfo = storageSession().getItem<LoginResult>(sessionKey);
|
||||||
NProgress.start();
|
NProgress.start();
|
||||||
const externalLink = isUrl(to?.name as string);
|
const externalLink = isUrl(to?.name as string);
|
||||||
if (!externalLink) {
|
if (!externalLink) {
|
||||||
|
@ -19,7 +19,7 @@ import {
|
|||||||
import { getConfig } from "@/config";
|
import { getConfig } from "@/config";
|
||||||
import { menuType } from "@/layout/types";
|
import { menuType } from "@/layout/types";
|
||||||
import { buildHierarchyTree } from "@/utils/tree";
|
import { buildHierarchyTree } from "@/utils/tree";
|
||||||
import { sessionKey, type DataInfo } from "@/utils/auth";
|
import { sessionKey } from "@/utils/auth";
|
||||||
import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
|
import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
|
||||||
import { usePermissionStoreHook } from "@/store/modules/permission";
|
import { usePermissionStoreHook } from "@/store/modules/permission";
|
||||||
const IFrame = () => import("@/layout/frameView.vue");
|
const IFrame = () => import("@/layout/frameView.vue");
|
||||||
@ -28,6 +28,7 @@ const modulesRoutes = import.meta.glob("/src/views/**/*.{vue,tsx}");
|
|||||||
|
|
||||||
// 动态路由
|
// 动态路由
|
||||||
import { getAsyncRoutes } from "@/api/routes";
|
import { getAsyncRoutes } from "@/api/routes";
|
||||||
|
import { LoginResult } from "@/api/login";
|
||||||
|
|
||||||
function handRank(routeInfo: any) {
|
function handRank(routeInfo: any) {
|
||||||
const { name, path, parentId, meta } = routeInfo;
|
const { name, path, parentId, meta } = routeInfo;
|
||||||
@ -76,15 +77,13 @@ function filterChildrenTree(data: RouteComponent[]) {
|
|||||||
function isOneOfArray(a: Array<string>, b: Array<string>) {
|
function isOneOfArray(a: Array<string>, b: Array<string>) {
|
||||||
return Array.isArray(a) && Array.isArray(b)
|
return Array.isArray(a) && Array.isArray(b)
|
||||||
? intersection(a, b).length > 0
|
? intersection(a, b).length > 0
|
||||||
? true
|
|
||||||
: false
|
|
||||||
: true;
|
: true;
|
||||||
}
|
}
|
||||||
|
|
||||||
/** 从sessionStorage里取出当前登陆用户的角色roles,过滤无权限的菜单 */
|
/** 从sessionStorage里取出当前登陆用户的角色roles,过滤无权限的菜单 */
|
||||||
function filterNoPermissionTree(data: RouteComponent[]) {
|
function filterNoPermissionTree(data: RouteComponent[]) {
|
||||||
const currentRoles =
|
const currentRoles =
|
||||||
storageSession().getItem<DataInfo<number>>(sessionKey)?.roles ?? [];
|
storageSession().getItem<LoginResult>(sessionKey)?.roles ?? [];
|
||||||
const newTree = cloneDeep(data).filter((v: any) =>
|
const newTree = cloneDeep(data).filter((v: any) =>
|
||||||
isOneOfArray(v.meta?.roles, currentRoles)
|
isOneOfArray(v.meta?.roles, currentRoles)
|
||||||
);
|
);
|
||||||
|
@ -23,7 +23,7 @@ export function getToken(): LoginResult {
|
|||||||
export function setToken(data: LoginResult) {
|
export function setToken(data: LoginResult) {
|
||||||
let expires = 0;
|
let expires = 0;
|
||||||
const { access_token, refresh_token } = data;
|
const { access_token, refresh_token } = data;
|
||||||
expires = new Date(data.expires).getTime(); // 如果后端直接设置时间戳,将此处代码改为expires = data.expires,然后把上面的DataInfo<Date>改成DataInfo<number>即可
|
expires = new Date(data.expires).getTime();
|
||||||
const cookieString = JSON.stringify({ access_token, expires });
|
const cookieString = JSON.stringify({ access_token, expires });
|
||||||
|
|
||||||
expires > 0
|
expires > 0
|
||||||
|
@ -73,22 +73,22 @@ class PureHttp {
|
|||||||
return config;
|
return config;
|
||||||
}
|
}
|
||||||
/** 请求白名单,放置一些不需要token的接口(通过设置请求白名单,防止token过期后再请求造成的死循环问题) */
|
/** 请求白名单,放置一些不需要token的接口(通过设置请求白名单,防止token过期后再请求造成的死循环问题) */
|
||||||
const whiteList = ["/refreshToken", "/login"];
|
const whiteList = ["/admin/v1/login", "/admin/v1/login/refresh"];
|
||||||
return whiteList.some(v => config.url.indexOf(v) > -1)
|
return whiteList.some(v => config.url.indexOf(v) > -1)
|
||||||
? config
|
? config
|
||||||
: new Promise(resolve => {
|
: new Promise(resolve => {
|
||||||
const data = getToken();
|
const data = getToken();
|
||||||
if (data) {
|
if (data) {
|
||||||
const now = new Date().getTime();
|
const now = new Date().getTime();
|
||||||
const expired = parseInt(data.expires) - now <= 0;
|
const expired = new Date(data.expires).getTime() - now <= 0;
|
||||||
if (expired) {
|
if (expired) {
|
||||||
if (!PureHttp.isRefreshing) {
|
if (!PureHttp.isRefreshing) {
|
||||||
PureHttp.isRefreshing = true;
|
PureHttp.isRefreshing = true;
|
||||||
// token过期刷新
|
// token过期刷新
|
||||||
useUserStoreHook()
|
useUserStoreHook()
|
||||||
.handRefreshToken(data.refreshToken)
|
.handRefreshToken(data.refresh_token)
|
||||||
.then(res => {
|
.then(res => {
|
||||||
const token = res.data.accessToken;
|
const token = res.access_token;
|
||||||
config.headers["Authorization"] = formatToken(token);
|
config.headers["Authorization"] = formatToken(token);
|
||||||
PureHttp.requests.forEach(cb => cb(token));
|
PureHttp.requests.forEach(cb => cb(token));
|
||||||
PureHttp.requests = [];
|
PureHttp.requests = [];
|
||||||
@ -100,7 +100,7 @@ class PureHttp {
|
|||||||
resolve(PureHttp.retryOriginalRequest(config));
|
resolve(PureHttp.retryOriginalRequest(config));
|
||||||
} else {
|
} else {
|
||||||
config.headers["Authorization"] = formatToken(
|
config.headers["Authorization"] = formatToken(
|
||||||
data.accessToken
|
data.access_token
|
||||||
);
|
);
|
||||||
resolve(config);
|
resolve(config);
|
||||||
}
|
}
|
||||||
|
@ -1,5 +1,6 @@
|
|||||||
import { removeToken, setToken, type DataInfo } from "./auth";
|
import { removeToken, setToken } from "./auth";
|
||||||
import { subBefore, getQueryMap } from "@pureadmin/utils";
|
import { subBefore, getQueryMap } from "@pureadmin/utils";
|
||||||
|
import { LoginResult } from "@/api/login";
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 简版前端单点登录,根据实际业务自行编写
|
* 简版前端单点登录,根据实际业务自行编写
|
||||||
@ -12,7 +13,7 @@ import { subBefore, getQueryMap } from "@pureadmin/utils";
|
|||||||
*/
|
*/
|
||||||
(function () {
|
(function () {
|
||||||
// 获取 url 中的参数
|
// 获取 url 中的参数
|
||||||
const params = getQueryMap(location.href) as DataInfo<Date>;
|
const params = getQueryMap(location.href) as LoginResult;
|
||||||
const must = ["username", "roles", "accessToken"];
|
const must = ["username", "roles", "accessToken"];
|
||||||
const mustLength = must.length;
|
const mustLength = must.length;
|
||||||
if (Object.keys(params).length !== mustLength) return;
|
if (Object.keys(params).length !== mustLength) return;
|
||||||
|
@ -57,7 +57,6 @@ const onLogin = async (formEl: FormInstance | undefined) => {
|
|||||||
useUserStoreHook()
|
useUserStoreHook()
|
||||||
.loginByUsername(ruleForm)
|
.loginByUsername(ruleForm)
|
||||||
.then(res => {
|
.then(res => {
|
||||||
console.log("登录返回", res);
|
|
||||||
// 获取后端路由
|
// 获取后端路由
|
||||||
initRouter().then(() => {
|
initRouter().then(() => {
|
||||||
router.push(getTopMenu(true).path);
|
router.push(getTopMenu(true).path);
|
||||||
|
@ -1,12 +1,12 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
defineOptions({
|
defineOptions({
|
||||||
name: "AdminRole"
|
name: "SystemMenu"
|
||||||
});
|
});
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="flex justify-center items-center h-[640px]">
|
<div class="flex justify-center items-center h-[640px]">
|
||||||
角色管理
|
菜单管理
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
@ -1,12 +1,12 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
defineOptions({
|
defineOptions({
|
||||||
name: "AdminUser"
|
name: "AdminRole"
|
||||||
});
|
});
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="flex justify-center items-center h-[640px]">
|
<div class="flex justify-center items-center h-[640px]">
|
||||||
用户管理
|
角色管理
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
@ -5,5 +5,5 @@ defineOptions({
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<h1>Pure-Admin-Thin(非国际化版本)</h1>
|
<h1>我是首页</h1>
|
||||||
</template>
|
</template>
|
||||||
|
Loading…
Reference in New Issue
Block a user