mirror of
https://github.com/pure-admin/vue-pure-admin.git
synced 2025-11-21 14:13:36 +08:00
Merge branch 'main' into gitee
This commit is contained in:
@@ -10,7 +10,7 @@ type Result = {
|
||||
|
||||
/** 卡片列表 */
|
||||
export const getCardList = (data?: object) => {
|
||||
return http.request<Result>("post", "/getCardList", { data });
|
||||
return http.request<Result>("post", "/get-card-list", { data });
|
||||
};
|
||||
|
||||
/** 版本日志 */
|
||||
|
||||
@@ -7,5 +7,5 @@ type Result = {
|
||||
|
||||
/** 地图数据 */
|
||||
export const mapJson = (params?: object) => {
|
||||
return http.request<Result>("get", "/getMapInfo", { params });
|
||||
return http.request<Result>("get", "/get-map-info", { params });
|
||||
};
|
||||
|
||||
@@ -6,5 +6,5 @@ type Result = {
|
||||
};
|
||||
|
||||
export const getAsyncRoutes = () => {
|
||||
return http.request<Result>("get", "/getAsyncRoutes");
|
||||
return http.request<Result>("get", "/get-async-routes");
|
||||
};
|
||||
|
||||
@@ -35,5 +35,5 @@ export const getLogin = (data?: object) => {
|
||||
|
||||
/** 刷新token */
|
||||
export const refreshTokenApi = (data?: object) => {
|
||||
return http.request<RefreshTokenResult>("post", "/refreshToken", { data });
|
||||
return http.request<RefreshTokenResult>("post", "/refresh-token", { data });
|
||||
};
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
@font-face {
|
||||
font-family: "iconfont"; /* Project id 2208059 */
|
||||
src: url("iconfont.woff2?t=1671895108120") format("woff2"),
|
||||
src:
|
||||
url("iconfont.woff2?t=1671895108120") format("woff2"),
|
||||
url("iconfont.woff?t=1671895108120") format("woff"),
|
||||
url("iconfont.ttf?t=1671895108120") format("truetype");
|
||||
}
|
||||
|
||||
@@ -10,7 +10,8 @@
|
||||
}
|
||||
|
||||
ul {
|
||||
animation: move 0.3s linear infinite,
|
||||
animation:
|
||||
move 0.3s linear infinite,
|
||||
bounce-in-down 1s calc(var(--delay) * 1s) forwards;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
@font-face {
|
||||
font-family: "iconfont";
|
||||
src: url("iconfont.eot?t=1618544337340"); /* IE9 */
|
||||
src: url("iconfont.eot?t=1618544337340#iefix") format("embedded-opentype"),
|
||||
src:
|
||||
url("iconfont.eot?t=1618544337340#iefix") format("embedded-opentype"),
|
||||
/* IE6-IE8 */
|
||||
url("data:application/x-font-woff2;charset=utf-8;base64,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")
|
||||
format("woff2"),
|
||||
|
||||
@@ -28,9 +28,12 @@
|
||||
padding: 4px 0;
|
||||
background-color: #fff;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 8px -2px rgb(0 0 0 / 5%), 0 1px 4px -1px rgb(0 0 0 / 7%),
|
||||
box-shadow:
|
||||
0 2px 8px -2px rgb(0 0 0 / 5%),
|
||||
0 1px 4px -1px rgb(0 0 0 / 7%),
|
||||
0 0 1px rgb(0 0 0 / 7%);
|
||||
transition: transform 0.5s cubic-bezier(0.645, 0.045, 0.355, 1),
|
||||
transition:
|
||||
transform 0.5s cubic-bezier(0.645, 0.045, 0.355, 1),
|
||||
width 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||
will-change: transform, width;
|
||||
}
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
@font-face {
|
||||
font-family: "iconfont"; /* Project id 3268330 */
|
||||
src: url("iconfont.woff2?t=1647939915215") format("woff2"),
|
||||
src:
|
||||
url("iconfont.woff2?t=1647939915215") format("woff2"),
|
||||
url("iconfont.woff?t=1647939915215") format("woff"),
|
||||
url("iconfont.ttf?t=1647939915215") format("truetype");
|
||||
}
|
||||
|
||||
@@ -8,7 +8,7 @@ const setConfig = (cfg?: unknown) => {
|
||||
config = Object.assign(config, cfg);
|
||||
};
|
||||
|
||||
const getConfig = (key?: string): ServerConfigs => {
|
||||
const getConfig = (key?: string): PlatformConfigs => {
|
||||
if (typeof key === "string") {
|
||||
const arr = key.split(".");
|
||||
if (arr && arr.length) {
|
||||
@@ -27,11 +27,11 @@ const getConfig = (key?: string): ServerConfigs => {
|
||||
};
|
||||
|
||||
/** 获取项目动态全局配置 */
|
||||
export const getServerConfig = async (app: App): Promise<undefined> => {
|
||||
export const getPlatformConfig = async (app: App): Promise<undefined> => {
|
||||
app.config.globalProperties.$config = getConfig();
|
||||
return axios({
|
||||
method: "get",
|
||||
url: `${VITE_PUBLIC_PATH}serverConfig.json`
|
||||
url: `${VITE_PUBLIC_PATH}platform-config.json`
|
||||
})
|
||||
.then(({ data: config }) => {
|
||||
let $config = app.config.globalProperties.$config;
|
||||
@@ -45,7 +45,7 @@ export const getServerConfig = async (app: App): Promise<undefined> => {
|
||||
return $config;
|
||||
})
|
||||
.catch(() => {
|
||||
throw "请在public文件夹下添加serverConfig.json配置文件";
|
||||
throw "请在public文件夹下添加platform-config.json配置文件";
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
@@ -40,22 +40,20 @@ const getSectionStyle = computed(() => {
|
||||
|
||||
const transitionMain = defineComponent({
|
||||
render() {
|
||||
const transitionName =
|
||||
transitions.value(this.route)?.name || "fade-transform";
|
||||
const enterTransition = transitions.value(this.route)?.enterTransition;
|
||||
const leaveTransition = transitions.value(this.route)?.leaveTransition;
|
||||
return h(
|
||||
Transition,
|
||||
{
|
||||
name:
|
||||
transitions.value(this.route) &&
|
||||
this.route.meta.transition.enterTransition
|
||||
? "pure-classes-transition"
|
||||
: (transitions.value(this.route) &&
|
||||
this.route.meta.transition.name) ||
|
||||
"fade-transform",
|
||||
enterActiveClass:
|
||||
transitions.value(this.route) &&
|
||||
`animate__animated ${this.route.meta.transition.enterTransition}`,
|
||||
leaveActiveClass:
|
||||
transitions.value(this.route) &&
|
||||
`animate__animated ${this.route.meta.transition.leaveTransition}`,
|
||||
name: enterTransition ? "pure-classes-transition" : transitionName,
|
||||
enterActiveClass: enterTransition
|
||||
? `animate__animated ${enterTransition}`
|
||||
: undefined,
|
||||
leaveActiveClass: leaveTransition
|
||||
? `animate__animated ${leaveTransition}`
|
||||
: undefined,
|
||||
mode: "out-in",
|
||||
appear: true
|
||||
},
|
||||
|
||||
@@ -50,7 +50,9 @@ const { device } = useNav();
|
||||
padding: 2px;
|
||||
margin-right: 3px;
|
||||
font-size: 20px;
|
||||
box-shadow: inset 0 -2px #cdcde6, inset 0 0 1px 1px #fff,
|
||||
box-shadow:
|
||||
inset 0 -2px #cdcde6,
|
||||
inset 0 0 1px 1px #fff,
|
||||
0 1px 2px 1px #1e235a66;
|
||||
}
|
||||
|
||||
|
||||
@@ -8,13 +8,6 @@ import {
|
||||
nextTick,
|
||||
onBeforeMount
|
||||
} from "vue";
|
||||
import {
|
||||
useDark,
|
||||
debounce,
|
||||
useGlobal,
|
||||
storageLocal,
|
||||
storageSession
|
||||
} from "@pureadmin/utils";
|
||||
import { getConfig } from "@/config";
|
||||
import { useRouter } from "vue-router";
|
||||
import panel from "../panel/index.vue";
|
||||
@@ -27,6 +20,7 @@ import { useAppStoreHook } from "@/store/modules/app";
|
||||
import { toggleTheme } from "@pureadmin/theme/dist/browser-utils";
|
||||
import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
|
||||
import { useDataThemeChange } from "@/layout/hooks/useDataThemeChange";
|
||||
import { useDark, debounce, useGlobal, storageLocal } from "@pureadmin/utils";
|
||||
|
||||
import dayIcon from "@/assets/svg/day.svg?component";
|
||||
import darkIcon from "@/assets/svg/dark.svg?component";
|
||||
@@ -133,7 +127,6 @@ const multiTagsCacheChange = () => {
|
||||
function onReset() {
|
||||
removeToken();
|
||||
storageLocal().clear();
|
||||
storageSession().clear();
|
||||
const { Grey, Weak, MultiTagsCache, EpThemeColor, Layout } = getConfig();
|
||||
useAppStoreHook().setLayout(Layout);
|
||||
setEpThemeColor(EpThemeColor);
|
||||
|
||||
@@ -56,8 +56,9 @@ onMounted(() => {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.frame {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 998;
|
||||
height: calc(100vh - 88px);
|
||||
|
||||
.frame-iframe {
|
||||
box-sizing: border-box;
|
||||
|
||||
@@ -43,7 +43,7 @@ export function useLayout() {
|
||||
}
|
||||
};
|
||||
|
||||
/** 清空缓存后从serverConfig.json读取默认配置并赋值到storage中 */
|
||||
/** 清空缓存后从platform-config.json读取默认配置并赋值到storage中 */
|
||||
const layout = computed(() => {
|
||||
return $storage?.layout.layout;
|
||||
});
|
||||
|
||||
@@ -3,7 +3,7 @@ import router from "./router";
|
||||
import { setupStore } from "@/store";
|
||||
import ElementPlus from "element-plus";
|
||||
import { useI18n } from "@/plugins/i18n";
|
||||
import { getServerConfig } from "./config";
|
||||
import { getPlatformConfig } from "./config";
|
||||
import { createApp, Directive } from "vue";
|
||||
import { MotionPlugin } from "@vueuse/motion";
|
||||
import { useEcharts } from "@/plugins/echarts";
|
||||
@@ -45,7 +45,7 @@ app.component("FontIcon", FontIcon);
|
||||
import { Auth } from "@/components/ReAuth";
|
||||
app.component("Auth", Auth);
|
||||
|
||||
getServerConfig(app).then(async config => {
|
||||
getPlatformConfig(app).then(async config => {
|
||||
setupStore(app);
|
||||
app.use(router);
|
||||
await router.isReady();
|
||||
|
||||
@@ -1,16 +1,13 @@
|
||||
import "@/utils/sso";
|
||||
import Cookies from "js-cookie";
|
||||
import { getConfig } from "@/config";
|
||||
import NProgress from "@/utils/progress";
|
||||
import { transformI18n } from "@/plugins/i18n";
|
||||
import { sessionKey, type DataInfo } from "@/utils/auth";
|
||||
import { buildHierarchyTree } from "@/utils/tree";
|
||||
import remainingRouter from "./modules/remaining";
|
||||
import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
|
||||
import { usePermissionStoreHook } from "@/store/modules/permission";
|
||||
import {
|
||||
Router,
|
||||
createRouter,
|
||||
RouteRecordRaw,
|
||||
RouteComponent
|
||||
} from "vue-router";
|
||||
import { isUrl, openLink, storageLocal, isAllEmpty } from "@pureadmin/utils";
|
||||
import {
|
||||
ascending,
|
||||
getTopMenu,
|
||||
@@ -22,10 +19,18 @@ import {
|
||||
formatTwoStageRoutes,
|
||||
formatFlatteningRoutes
|
||||
} from "./utils";
|
||||
import { buildHierarchyTree } from "@/utils/tree";
|
||||
import { isUrl, openLink, storageSession, isAllEmpty } from "@pureadmin/utils";
|
||||
|
||||
import remainingRouter from "./modules/remaining";
|
||||
import {
|
||||
Router,
|
||||
createRouter,
|
||||
RouteRecordRaw,
|
||||
RouteComponent
|
||||
} from "vue-router";
|
||||
import {
|
||||
type DataInfo,
|
||||
userKey,
|
||||
removeToken,
|
||||
multipleTabsKey
|
||||
} from "@/utils/auth";
|
||||
|
||||
/** 自动导入全部静态路由,无需再手动引入!匹配 src/router/modules 目录(任何嵌套级别)中具有 .ts 扩展名的所有文件,除了 remaining.ts 文件
|
||||
* 如何匹配所有文件请看:https://github.com/mrmlnc/fast-glob#basic-syntax
|
||||
@@ -109,7 +114,7 @@ router.beforeEach((to: ToRouteType, _from, next) => {
|
||||
handleAliveRoute(to);
|
||||
}
|
||||
}
|
||||
const userInfo = storageSession().getItem<DataInfo<number>>(sessionKey);
|
||||
const userInfo = storageLocal().getItem<DataInfo<number>>(userKey);
|
||||
NProgress.start();
|
||||
const externalLink = isUrl(to?.name as string);
|
||||
if (!externalLink) {
|
||||
@@ -125,7 +130,7 @@ router.beforeEach((to: ToRouteType, _from, next) => {
|
||||
function toCorrectRoute() {
|
||||
whiteList.includes(to.fullPath) ? next(_from.fullPath) : next();
|
||||
}
|
||||
if (userInfo) {
|
||||
if (Cookies.get(multipleTabsKey) && userInfo) {
|
||||
// 无权限跳转403页面
|
||||
if (to.meta?.roles && !isOneOfArray(to.meta?.roles, userInfo?.roles)) {
|
||||
next({ path: "/error/403" });
|
||||
@@ -187,6 +192,7 @@ router.beforeEach((to: ToRouteType, _from, next) => {
|
||||
if (whiteList.indexOf(to.path) !== -1) {
|
||||
next();
|
||||
} else {
|
||||
removeToken();
|
||||
next({ path: "/login" });
|
||||
}
|
||||
} else {
|
||||
|
||||
@@ -13,13 +13,13 @@ import {
|
||||
cloneDeep,
|
||||
isAllEmpty,
|
||||
intersection,
|
||||
storageSession,
|
||||
storageLocal,
|
||||
isIncludeAllChildren
|
||||
} from "@pureadmin/utils";
|
||||
import { getConfig } from "@/config";
|
||||
import { menuType } from "@/layout/types";
|
||||
import { buildHierarchyTree } from "@/utils/tree";
|
||||
import { sessionKey, type DataInfo } from "@/utils/auth";
|
||||
import { userKey, type DataInfo } from "@/utils/auth";
|
||||
import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
|
||||
import { usePermissionStoreHook } from "@/store/modules/permission";
|
||||
const IFrame = () => import("@/layout/frameView.vue");
|
||||
@@ -81,10 +81,10 @@ function isOneOfArray(a: Array<string>, b: Array<string>) {
|
||||
: true;
|
||||
}
|
||||
|
||||
/** 从sessionStorage里取出当前登陆用户的角色roles,过滤无权限的菜单 */
|
||||
/** 从localStorage里取出当前登陆用户的角色roles,过滤无权限的菜单 */
|
||||
function filterNoPermissionTree(data: RouteComponent[]) {
|
||||
const currentRoles =
|
||||
storageSession().getItem<DataInfo<number>>(sessionKey)?.roles ?? [];
|
||||
storageLocal().getItem<DataInfo<number>>(userKey)?.roles ?? [];
|
||||
const newTree = cloneDeep(data).filter((v: any) =>
|
||||
isOneOfArray(v.meta?.roles, currentRoles)
|
||||
);
|
||||
@@ -184,9 +184,9 @@ function handleAsyncRoutes(routeList) {
|
||||
/** 初始化路由(`new Promise` 写法防止在异步请求中造成无限循环)*/
|
||||
function initRouter() {
|
||||
if (getConfig()?.CachingAsyncRoutes) {
|
||||
// 开启动态路由缓存本地sessionStorage
|
||||
// 开启动态路由缓存本地localStorage
|
||||
const key = "async-routes";
|
||||
const asyncRouteList = storageSession().getItem(key) as any;
|
||||
const asyncRouteList = storageLocal().getItem(key) as any;
|
||||
if (asyncRouteList && asyncRouteList?.length > 0) {
|
||||
return new Promise(resolve => {
|
||||
handleAsyncRoutes(asyncRouteList);
|
||||
@@ -196,7 +196,7 @@ function initRouter() {
|
||||
return new Promise(resolve => {
|
||||
getAsyncRoutes().then(({ data }) => {
|
||||
handleAsyncRoutes(cloneDeep(data));
|
||||
storageSession().setItem(key, data);
|
||||
storageLocal().setItem(key, data);
|
||||
resolve(router);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -41,4 +41,5 @@ export type userType = {
|
||||
roles?: Array<string>;
|
||||
verifyCode?: string;
|
||||
currentPage?: number;
|
||||
isRemembered?: boolean;
|
||||
};
|
||||
|
||||
@@ -3,24 +3,25 @@ import { store } from "@/store";
|
||||
import { userType } from "./types";
|
||||
import { routerArrays } from "@/layout/types";
|
||||
import { router, resetRouter } from "@/router";
|
||||
import { storageSession } from "@pureadmin/utils";
|
||||
import { storageLocal } from "@pureadmin/utils";
|
||||
import { getLogin, refreshTokenApi } from "@/api/user";
|
||||
import { UserResult, RefreshTokenResult } from "@/api/user";
|
||||
import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
|
||||
import { type DataInfo, setToken, removeToken, sessionKey } from "@/utils/auth";
|
||||
import { type DataInfo, setToken, removeToken, userKey } from "@/utils/auth";
|
||||
|
||||
export const useUserStore = defineStore({
|
||||
id: "pure-user",
|
||||
state: (): userType => ({
|
||||
// 用户名
|
||||
username:
|
||||
storageSession().getItem<DataInfo<number>>(sessionKey)?.username ?? "",
|
||||
username: storageLocal().getItem<DataInfo<number>>(userKey)?.username ?? "",
|
||||
// 页面级别权限
|
||||
roles: storageSession().getItem<DataInfo<number>>(sessionKey)?.roles ?? [],
|
||||
roles: storageLocal().getItem<DataInfo<number>>(userKey)?.roles ?? [],
|
||||
// 前端生成的验证码(按实际需求替换)
|
||||
verifyCode: "",
|
||||
// 判断登录页面显示哪个组件(0:登录(默认)、1:手机登录、2:二维码登录、3:注册、4:忘记密码)
|
||||
currentPage: 0
|
||||
currentPage: 0,
|
||||
// 是否勾选了7天内免登录
|
||||
isRemembered: false
|
||||
}),
|
||||
actions: {
|
||||
/** 存储用户名 */
|
||||
@@ -39,6 +40,10 @@ export const useUserStore = defineStore({
|
||||
SET_CURRENTPAGE(value: number) {
|
||||
this.currentPage = value;
|
||||
},
|
||||
/** 存储是否勾选了7天内免登录 */
|
||||
SET_ISREMEMBERED(bool: boolean) {
|
||||
this.isRemembered = bool;
|
||||
},
|
||||
/** 登入 */
|
||||
async loginByUsername(data) {
|
||||
return new Promise<UserResult>((resolve, reject) => {
|
||||
|
||||
@@ -122,8 +122,10 @@ html.dark {
|
||||
.pure-message {
|
||||
background-color: rgb(36 37 37) !important;
|
||||
background-image: initial !important;
|
||||
box-shadow: rgb(13 13 13 / 12%) 0 3px 6px -4px,
|
||||
rgb(13 13 13 / 8%) 0 6px 16px 0, rgb(13 13 13 / 5%) 0 9px 28px 8px !important;
|
||||
box-shadow:
|
||||
rgb(13 13 13 / 12%) 0 3px 6px -4px,
|
||||
rgb(13 13 13 / 8%) 0 6px 16px 0,
|
||||
rgb(13 13 13 / 5%) 0 9px 28px 8px !important;
|
||||
|
||||
& .el-message__content {
|
||||
color: $color-white !important;
|
||||
@@ -142,7 +144,9 @@ html.dark {
|
||||
/* 自定义菜单搜索样式 */
|
||||
.pure-search-dialog {
|
||||
.el-dialog__footer {
|
||||
box-shadow: 0 -1px 0 0 #555a64, 0 -3px 6px 0 rgb(69 98 155 / 12%);
|
||||
box-shadow:
|
||||
0 -1px 0 0 #555a64,
|
||||
0 -3px 6px 0 rgb(69 98 155 / 12%);
|
||||
}
|
||||
|
||||
.search-footer {
|
||||
|
||||
@@ -63,7 +63,8 @@
|
||||
}
|
||||
|
||||
& .peg {
|
||||
box-shadow: 0 0 10px var(--el-color-primary),
|
||||
box-shadow:
|
||||
0 0 10px var(--el-color-primary),
|
||||
0 0 5px var(--el-color-primary) !important;
|
||||
}
|
||||
|
||||
@@ -105,7 +106,9 @@
|
||||
height: 24px;
|
||||
border-radius: 4px;
|
||||
outline: none;
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
transition:
|
||||
background-color 0.2s,
|
||||
color 0.2s;
|
||||
|
||||
&:hover {
|
||||
color: rgb(0 0 0 / 88%) !important;
|
||||
@@ -124,7 +127,9 @@
|
||||
padding: 10px 13px !important;
|
||||
background: #fff !important;
|
||||
border-width: 0 !important;
|
||||
box-shadow: 0 3px 6px -4px #0000001f, 0 6px 16px #00000014,
|
||||
box-shadow:
|
||||
0 3px 6px -4px #0000001f,
|
||||
0 6px 16px #00000014,
|
||||
0 9px 28px 8px #0000000d !important;
|
||||
|
||||
&.el-message.is-closable .el-message__content {
|
||||
@@ -145,7 +150,9 @@
|
||||
right: 9px !important;
|
||||
border-radius: 4px;
|
||||
outline: none;
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
transition:
|
||||
background-color 0.2s,
|
||||
color 0.2s;
|
||||
|
||||
&:hover {
|
||||
background-color: rgb(0 0 0 / 6%);
|
||||
@@ -170,6 +177,8 @@
|
||||
|
||||
.el-dialog__footer {
|
||||
padding-bottom: 10px;
|
||||
box-shadow: 0 -1px 0 0 #e0e3e8, 0 -3px 6px 0 rgb(69 98 155 / 12%);
|
||||
box-shadow:
|
||||
0 -1px 0 0 #e0e3e8,
|
||||
0 -3px 6px 0 rgb(69 98 155 / 12%);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -44,7 +44,10 @@
|
||||
text-transform: uppercase;
|
||||
margin: 15px 0;
|
||||
color: #999;
|
||||
font: bold 200% Consolas, Monaco, monospace;
|
||||
font:
|
||||
bold 200% Consolas,
|
||||
Monaco,
|
||||
monospace;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1180px) {
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import Cookies from "js-cookie";
|
||||
import { storageSession } from "@pureadmin/utils";
|
||||
import { storageLocal } from "@pureadmin/utils";
|
||||
import { useUserStoreHook } from "@/store/modules/user";
|
||||
|
||||
export interface DataInfo<T> {
|
||||
@@ -15,22 +15,29 @@ export interface DataInfo<T> {
|
||||
roles?: Array<string>;
|
||||
}
|
||||
|
||||
export const sessionKey = "user-info";
|
||||
export const userKey = "user-info";
|
||||
export const TokenKey = "authorized-token";
|
||||
/**
|
||||
* 通过`multiple-tabs`是否在`cookie`中,判断用户是否已经登录系统,
|
||||
* 从而支持多标签页打开已经登录的系统后无需再登录。
|
||||
* 浏览器完全关闭后`multiple-tabs`将自动从`cookie`中销毁,
|
||||
* 再次打开浏览器需要重新登录系统
|
||||
* */
|
||||
export const multipleTabsKey = "multiple-tabs";
|
||||
|
||||
/** 获取`token` */
|
||||
export function getToken(): DataInfo<number> {
|
||||
// 此处与`TokenKey`相同,此写法解决初始化时`Cookies`中不存在`TokenKey`报错
|
||||
return Cookies.get(TokenKey)
|
||||
? JSON.parse(Cookies.get(TokenKey))
|
||||
: storageSession().getItem(sessionKey);
|
||||
: storageLocal().getItem(userKey);
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 设置`token`以及一些必要信息并采用无感刷新`token`方案
|
||||
* 无感刷新:后端返回`accessToken`(访问接口使用的`token`)、`refreshToken`(用于调用刷新`accessToken`的接口时所需的`token`,`refreshToken`的过期时间(比如30天)应大于`accessToken`的过期时间(比如2小时))、`expires`(`accessToken`的过期时间)
|
||||
* 将`accessToken`、`expires`这两条信息放在key值为authorized-token的cookie里(过期自动销毁)
|
||||
* 将`username`、`roles`、`refreshToken`、`expires`这四条信息放在key值为`user-info`的sessionStorage里(浏览器关闭自动销毁)
|
||||
* 将`username`、`roles`、`refreshToken`、`expires`这四条信息放在key值为`user-info`的localStorage里(利用`multipleTabsKey`当浏览器完全关闭后自动销毁)
|
||||
*/
|
||||
export function setToken(data: DataInfo<Date>) {
|
||||
let expires = 0;
|
||||
@@ -44,10 +51,20 @@ export function setToken(data: DataInfo<Date>) {
|
||||
})
|
||||
: Cookies.set(TokenKey, cookieString);
|
||||
|
||||
function setSessionKey(username: string, roles: Array<string>) {
|
||||
Cookies.set(
|
||||
multipleTabsKey,
|
||||
"true",
|
||||
useUserStoreHook().isRemembered
|
||||
? {
|
||||
expires: 7
|
||||
}
|
||||
: {}
|
||||
);
|
||||
|
||||
function setUserKey(username: string, roles: Array<string>) {
|
||||
useUserStoreHook().SET_USERNAME(username);
|
||||
useUserStoreHook().SET_ROLES(roles);
|
||||
storageSession().setItem(sessionKey, {
|
||||
storageLocal().setItem(userKey, {
|
||||
refreshToken,
|
||||
expires,
|
||||
username,
|
||||
@@ -57,20 +74,21 @@ export function setToken(data: DataInfo<Date>) {
|
||||
|
||||
if (data.username && data.roles) {
|
||||
const { username, roles } = data;
|
||||
setSessionKey(username, roles);
|
||||
setUserKey(username, roles);
|
||||
} else {
|
||||
const username =
|
||||
storageSession().getItem<DataInfo<number>>(sessionKey)?.username ?? "";
|
||||
storageLocal().getItem<DataInfo<number>>(userKey)?.username ?? "";
|
||||
const roles =
|
||||
storageSession().getItem<DataInfo<number>>(sessionKey)?.roles ?? [];
|
||||
setSessionKey(username, roles);
|
||||
storageLocal().getItem<DataInfo<number>>(userKey)?.roles ?? [];
|
||||
setUserKey(username, roles);
|
||||
}
|
||||
}
|
||||
|
||||
/** 删除`token`以及key值为`user-info`的session信息 */
|
||||
/** 删除`token`以及key值为`user-info`的localStorage信息 */
|
||||
export function removeToken() {
|
||||
Cookies.remove(TokenKey);
|
||||
sessionStorage.clear();
|
||||
Cookies.remove(multipleTabsKey);
|
||||
storageLocal().removeItem(userKey);
|
||||
}
|
||||
|
||||
/** 格式化token(jwt格式) */
|
||||
|
||||
93
src/utils/localforage/index.ts
Normal file
93
src/utils/localforage/index.ts
Normal file
@@ -0,0 +1,93 @@
|
||||
import forage from "localforage";
|
||||
import { LocalForage, ProxyStorage, ExpiresData } from "./types.d";
|
||||
|
||||
class StorageProxy implements ProxyStorage {
|
||||
protected storage: LocalForage;
|
||||
constructor(storageModel) {
|
||||
this.storage = storageModel;
|
||||
this.storage.config({
|
||||
// 首选IndexedDB作为第一驱动,不支持IndexedDB会自动降级到localStorage(WebSQL被弃用,详情看https://developer.chrome.com/blog/deprecating-web-sql)
|
||||
driver: [this.storage.INDEXEDDB, this.storage.LOCALSTORAGE],
|
||||
name: "pure-admin"
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 将对应键名的数据保存到离线仓库
|
||||
* @param k 键名
|
||||
* @param v 键值
|
||||
* @param m 缓存时间(单位`分`,默认`0`分钟,永久缓存)
|
||||
*/
|
||||
public async setItem<T>(k: string, v: T, m = 0): Promise<T> {
|
||||
return new Promise((resolve, reject) => {
|
||||
this.storage
|
||||
.setItem(k, {
|
||||
data: v,
|
||||
expires: m ? new Date().getTime() + m * 60 * 1000 : 0
|
||||
})
|
||||
.then(value => {
|
||||
resolve(value.data);
|
||||
})
|
||||
.catch(err => {
|
||||
reject(err);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 从离线仓库中获取对应键名的值
|
||||
* @param k 键名
|
||||
*/
|
||||
public async getItem<T>(k: string): Promise<T> {
|
||||
return new Promise((resolve, reject) => {
|
||||
this.storage
|
||||
.getItem(k)
|
||||
.then((value: ExpiresData<T>) => {
|
||||
value && (value.expires > new Date().getTime() || value.expires === 0)
|
||||
? resolve(value.data)
|
||||
: resolve(null);
|
||||
})
|
||||
.catch(err => {
|
||||
reject(err);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 从离线仓库中删除对应键名的值
|
||||
* @param k 键名
|
||||
*/
|
||||
public async removeItem(k: string) {
|
||||
return new Promise<void>((resolve, reject) => {
|
||||
this.storage
|
||||
.removeItem(k)
|
||||
.then(() => {
|
||||
resolve();
|
||||
})
|
||||
.catch(err => {
|
||||
reject(err);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 从离线仓库中删除所有的键名,重置数据库
|
||||
*/
|
||||
public async clear() {
|
||||
return new Promise<void>((resolve, reject) => {
|
||||
this.storage
|
||||
.clear()
|
||||
.then(() => {
|
||||
resolve();
|
||||
})
|
||||
.catch(err => {
|
||||
reject(err);
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 二次封装 [localforage](https://localforage.docschina.org/) 支持设置过期时间,提供完整的类型提示
|
||||
*/
|
||||
export const localForage = () => new StorageProxy(forage);
|
||||
166
src/utils/localforage/types.d.ts
vendored
Normal file
166
src/utils/localforage/types.d.ts
vendored
Normal file
@@ -0,0 +1,166 @@
|
||||
// https://github.com/localForage/localForage/blob/master/typings/localforage.d.ts
|
||||
|
||||
interface LocalForageDbInstanceOptions {
|
||||
name?: string;
|
||||
|
||||
storeName?: string;
|
||||
}
|
||||
|
||||
interface LocalForageOptions extends LocalForageDbInstanceOptions {
|
||||
driver?: string | string[];
|
||||
|
||||
size?: number;
|
||||
|
||||
version?: number;
|
||||
|
||||
description?: string;
|
||||
}
|
||||
|
||||
interface LocalForageDbMethodsCore {
|
||||
getItem<T>(
|
||||
key: string,
|
||||
callback?: (err: any, value: T | null) => void
|
||||
): Promise<T | null>;
|
||||
|
||||
setItem<T>(
|
||||
key: string,
|
||||
value: T,
|
||||
callback?: (err: any, value: T) => void
|
||||
): Promise<T>;
|
||||
|
||||
removeItem(key: string, callback?: (err: any) => void): Promise<void>;
|
||||
|
||||
clear(callback?: (err: any) => void): Promise<void>;
|
||||
|
||||
length(callback?: (err: any, numberOfKeys: number) => void): Promise<number>;
|
||||
|
||||
key(
|
||||
keyIndex: number,
|
||||
callback?: (err: any, key: string) => void
|
||||
): Promise<string>;
|
||||
|
||||
keys(callback?: (err: any, keys: string[]) => void): Promise<string[]>;
|
||||
|
||||
iterate<T, U>(
|
||||
iteratee: (value: T, key: string, iterationNumber: number) => U,
|
||||
callback?: (err: any, result: U) => void
|
||||
): Promise<U>;
|
||||
}
|
||||
|
||||
interface LocalForageDropInstanceFn {
|
||||
(
|
||||
dbInstanceOptions?: LocalForageDbInstanceOptions,
|
||||
callback?: (err: any) => void
|
||||
): Promise<void>;
|
||||
}
|
||||
|
||||
interface LocalForageDriverMethodsOptional {
|
||||
dropInstance?: LocalForageDropInstanceFn;
|
||||
}
|
||||
|
||||
// duplicating LocalForageDriverMethodsOptional to preserve TS v2.0 support,
|
||||
// since Partial<> isn't supported there
|
||||
interface LocalForageDbMethodsOptional {
|
||||
dropInstance: LocalForageDropInstanceFn;
|
||||
}
|
||||
|
||||
interface LocalForageDriverDbMethods
|
||||
extends LocalForageDbMethodsCore,
|
||||
LocalForageDriverMethodsOptional {}
|
||||
|
||||
interface LocalForageDriverSupportFunc {
|
||||
(): Promise<boolean>;
|
||||
}
|
||||
|
||||
interface LocalForageDriver extends LocalForageDriverDbMethods {
|
||||
_driver: string;
|
||||
|
||||
_initStorage(options: LocalForageOptions): void;
|
||||
|
||||
_support?: boolean | LocalForageDriverSupportFunc;
|
||||
}
|
||||
|
||||
interface LocalForageSerializer {
|
||||
serialize<T>(
|
||||
value: T | ArrayBuffer | Blob,
|
||||
callback: (value: string, error: any) => void
|
||||
): void;
|
||||
|
||||
deserialize<T>(value: string): T | ArrayBuffer | Blob;
|
||||
|
||||
stringToBuffer(serializedString: string): ArrayBuffer;
|
||||
|
||||
bufferToString(buffer: ArrayBuffer): string;
|
||||
}
|
||||
|
||||
interface LocalForageDbMethods
|
||||
extends LocalForageDbMethodsCore,
|
||||
LocalForageDbMethodsOptional {}
|
||||
|
||||
export interface LocalForage extends LocalForageDbMethods {
|
||||
LOCALSTORAGE: string;
|
||||
WEBSQL: string;
|
||||
INDEXEDDB: string;
|
||||
|
||||
/**
|
||||
* Set and persist localForage options. This must be called before any other calls to localForage are made, but can be called after localForage is loaded.
|
||||
* If you set any config values with this method they will persist after driver changes, so you can call config() then setDriver()
|
||||
* @param {LocalForageOptions} options?
|
||||
*/
|
||||
config(options: LocalForageOptions): boolean;
|
||||
config(options: string): any;
|
||||
config(): LocalForageOptions;
|
||||
|
||||
/**
|
||||
* Create a new instance of localForage to point to a different store.
|
||||
* All the configuration options used by config are supported.
|
||||
* @param {LocalForageOptions} options
|
||||
*/
|
||||
createInstance(options: LocalForageOptions): LocalForage;
|
||||
|
||||
driver(): string;
|
||||
|
||||
/**
|
||||
* Force usage of a particular driver or drivers, if available.
|
||||
* @param {string} driver
|
||||
*/
|
||||
setDriver(
|
||||
driver: string | string[],
|
||||
callback?: () => void,
|
||||
errorCallback?: (error: any) => void
|
||||
): Promise<void>;
|
||||
|
||||
defineDriver(
|
||||
driver: LocalForageDriver,
|
||||
callback?: () => void,
|
||||
errorCallback?: (error: any) => void
|
||||
): Promise<void>;
|
||||
|
||||
/**
|
||||
* Return a particular driver
|
||||
* @param {string} driver
|
||||
*/
|
||||
getDriver(driver: string): Promise<LocalForageDriver>;
|
||||
|
||||
getSerializer(
|
||||
callback?: (serializer: LocalForageSerializer) => void
|
||||
): Promise<LocalForageSerializer>;
|
||||
|
||||
supports(driverName: string): boolean;
|
||||
|
||||
ready(callback?: (error: any) => void): Promise<void>;
|
||||
}
|
||||
|
||||
// Customize
|
||||
|
||||
export interface ProxyStorage {
|
||||
setItem<T>(k: string, v: T, m: number): Promise<T>;
|
||||
getItem<T>(k: string): Promise<T>;
|
||||
removeItem(k: string): Promise<void>;
|
||||
clear(): Promise<void>;
|
||||
}
|
||||
|
||||
export interface ExpiresData<T> {
|
||||
data: T;
|
||||
expires: number;
|
||||
}
|
||||
@@ -4,7 +4,7 @@ import Storage from "responsive-storage";
|
||||
import { routerArrays } from "@/layout/types";
|
||||
import { responsiveStorageNameSpace } from "@/config";
|
||||
|
||||
export const injectResponsiveStorage = (app: App, config: ServerConfigs) => {
|
||||
export const injectResponsiveStorage = (app: App, config: PlatformConfigs) => {
|
||||
const nameSpace = responsiveStorageNameSpace();
|
||||
const configObj = Object.assign(
|
||||
{
|
||||
|
||||
@@ -16,7 +16,7 @@ const base64 =
|
||||
|
||||
function down() {
|
||||
axios
|
||||
.get("https://pure-admin.github.io/pure-admin-doc/img/pure.png", {
|
||||
.get("https://xiaoxian521.github.io/hyperlink/img/pure.png", {
|
||||
responseType: "blob"
|
||||
})
|
||||
.then(({ data }) => {
|
||||
@@ -34,7 +34,7 @@ function down() {
|
||||
<el-button
|
||||
@click="
|
||||
downloadByOnlineUrl(
|
||||
'https://pure-admin.github.io/pure-admin-doc/img/pure.png',
|
||||
'https://xiaoxian521.github.io/hyperlink/img/pure.png',
|
||||
'test-url.png'
|
||||
)
|
||||
"
|
||||
|
||||
@@ -17,7 +17,7 @@ const showAllPages = ref(false);
|
||||
const rotations = [0, 90, 180, 270];
|
||||
|
||||
const source =
|
||||
"https://pure-admin.github.io/pure-admin-doc/pdf/Cookie%E5%92%8CSession%E5%8C%BA%E5%88%AB%E7%94%A8%E6%B3%95.pdf";
|
||||
"https://xiaoxian521.github.io/hyperlink/pdf/Cookie%E5%92%8CSession%E5%8C%BA%E5%88%AB%E7%94%A8%E6%B3%95.pdf";
|
||||
|
||||
const handleDocumentRender = () => {
|
||||
loading.value = false;
|
||||
|
||||
@@ -107,7 +107,7 @@ watch(
|
||||
:show-icon="state.showIcon"
|
||||
:show-line-number="state.showLineNumber"
|
||||
:editable="state.editable"
|
||||
:editable-trigger="(state.editableTrigger as any)"
|
||||
:editable-trigger="state.editableTrigger as any"
|
||||
/>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
@@ -37,6 +37,7 @@ import globalization from "@/assets/svg/globalization.svg?component";
|
||||
import Lock from "@iconify-icons/ri/lock-fill";
|
||||
import Check from "@iconify-icons/ep/check";
|
||||
import User from "@iconify-icons/ri/user-3-fill";
|
||||
import Info from "@iconify-icons/ri/information-line";
|
||||
|
||||
defineOptions({
|
||||
name: "Login"
|
||||
@@ -80,7 +81,8 @@ const onLogin = async (formEl: FormInstance | undefined) => {
|
||||
message("登录成功", { type: "success" });
|
||||
});
|
||||
}
|
||||
});
|
||||
})
|
||||
.finally(() => (loading.value = false));
|
||||
} else {
|
||||
loading.value = false;
|
||||
return fields;
|
||||
@@ -106,6 +108,9 @@ onBeforeUnmount(() => {
|
||||
watch(imgCode, value => {
|
||||
useUserStoreHook().SET_VERIFYCODE(value);
|
||||
});
|
||||
watch(checked, bool => {
|
||||
useUserStoreHook().SET_ISREMEMBERED(bool);
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -224,7 +229,16 @@ watch(imgCode, value => {
|
||||
<el-form-item>
|
||||
<div class="w-full h-[20px] flex justify-between items-center">
|
||||
<el-checkbox v-model="checked">
|
||||
{{ t("login.remember") }}
|
||||
<span class="flex">
|
||||
{{ t("login.remember") }}
|
||||
<el-tooltip
|
||||
effect="dark"
|
||||
placement="top"
|
||||
:content="t('login.rememberInfo')"
|
||||
>
|
||||
<IconifyIconOffline :icon="Info" class="ml-1" />
|
||||
</el-tooltip>
|
||||
</span>
|
||||
</el-checkbox>
|
||||
<el-button
|
||||
link
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import { initRouter } from "@/router/utils";
|
||||
import { storageSession } from "@pureadmin/utils";
|
||||
import { storageLocal } from "@pureadmin/utils";
|
||||
import { type CSSProperties, ref, computed } from "vue";
|
||||
import { useUserStoreHook } from "@/store/modules/user";
|
||||
import { usePermissionStoreHook } from "@/store/modules/permission";
|
||||
@@ -34,7 +34,7 @@ function onChange() {
|
||||
.loginByUsername({ username: username.value, password: "admin123" })
|
||||
.then(res => {
|
||||
if (res.success) {
|
||||
storageSession().removeItem("async-routes");
|
||||
storageLocal().removeItem("async-routes");
|
||||
usePermissionStoreHook().clearAllCachePage();
|
||||
initRouter();
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user