mirror of
https://github.com/pure-admin/vue-pure-admin.git
synced 2025-06-06 08:27:54 +08:00
Merge branch 'main' into pages
This commit is contained in:
xiaoxian521
commit
190c3c6123
1
.vscode/settings.json
vendored
1
.vscode/settings.json
vendored
@ -57,6 +57,7 @@
|
||||
"v-copy",
|
||||
"v-longpress",
|
||||
"v-optimize",
|
||||
"v-perms",
|
||||
"v-ripple"
|
||||
],
|
||||
"vscodeCustomCodeColor.highlightValueColor": "#b392f0",
|
||||
|
||||
@ -125,6 +125,8 @@ menus:
|
||||
purePermission: Permission Manage
|
||||
purePermissionPage: Page Permission
|
||||
purePermissionButton: Button Permission
|
||||
purePermissionButtonRouter: Route return button permission
|
||||
purePermissionButtonLogin: Login interface return button permission
|
||||
pureTabs: Tabs Operate
|
||||
pureGuide: Guide
|
||||
pureAble: Able
|
||||
|
||||
@ -125,6 +125,8 @@ menus:
|
||||
purePermission: 权限管理
|
||||
purePermissionPage: 页面权限
|
||||
purePermissionButton: 按钮权限
|
||||
purePermissionButtonRouter: 路由返回按钮权限
|
||||
purePermissionButtonLogin: 登录接口返回按钮权限
|
||||
pureTabs: 标签页操作
|
||||
pureGuide: 引导页
|
||||
pureAble: 功能
|
||||
|
||||
@ -123,17 +123,34 @@ const permissionRouter = {
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/permission/button/index",
|
||||
name: "PermissionButton",
|
||||
path: "/permission/button",
|
||||
meta: {
|
||||
title: "menus.purePermissionButton",
|
||||
roles: ["admin", "common"],
|
||||
auths: [
|
||||
"permission:btn:add",
|
||||
"permission:btn:edit",
|
||||
"permission:btn:delete"
|
||||
]
|
||||
}
|
||||
roles: ["admin", "common"]
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: "/permission/button/router",
|
||||
component: "permission/button/index",
|
||||
name: "PermissionButtonRouter",
|
||||
meta: {
|
||||
title: "menus.purePermissionButtonRouter",
|
||||
auths: [
|
||||
"permission:btn:add",
|
||||
"permission:btn:edit",
|
||||
"permission:btn:delete"
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/permission/button/login",
|
||||
component: "permission/button/perms",
|
||||
name: "PermissionButtonLogin",
|
||||
meta: {
|
||||
title: "menus.purePermissionButtonLogin"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
@ -15,6 +15,8 @@ export default defineFakeRoute([
|
||||
nickname: "小铭",
|
||||
// 一个用户可能有多个角色
|
||||
roles: ["admin"],
|
||||
// 按钮级别权限
|
||||
permissions: ["*:*:*"],
|
||||
accessToken: "eyJhbGciOiJIUzUxMiJ9.admin",
|
||||
refreshToken: "eyJhbGciOiJIUzUxMiJ9.adminRefresh",
|
||||
expires: "2030/10/30 00:00:00"
|
||||
@ -28,6 +30,7 @@ export default defineFakeRoute([
|
||||
username: "common",
|
||||
nickname: "小林",
|
||||
roles: ["common"],
|
||||
permissions: ["permission:btn:add", "permission:btn:edit"],
|
||||
accessToken: "eyJhbGciOiJIUzUxMiJ9.common",
|
||||
refreshToken: "eyJhbGciOiJIUzUxMiJ9.commonRefresh",
|
||||
expires: "2030/10/30 00:00:00"
|
||||
|
||||
128
mock/system.ts
128
mock/system.ts
@ -696,7 +696,7 @@ export default defineFakeRoute([
|
||||
menuType: 0,
|
||||
title: "menus.purePermissionButton",
|
||||
name: "PermissionButton",
|
||||
path: "/permission/button/index",
|
||||
path: "/permission/button",
|
||||
component: "",
|
||||
rank: null,
|
||||
redirect: "",
|
||||
@ -717,6 +717,30 @@ export default defineFakeRoute([
|
||||
{
|
||||
parentId: 202,
|
||||
id: 203,
|
||||
menuType: 0,
|
||||
title: "menus.purePermissionButtonRouter",
|
||||
name: "PermissionButtonRouter",
|
||||
path: "/permission/button/router",
|
||||
component: "permission/button/index",
|
||||
rank: null,
|
||||
redirect: "",
|
||||
icon: "",
|
||||
extraIcon: "",
|
||||
enterTransition: "",
|
||||
leaveTransition: "",
|
||||
activePath: "",
|
||||
auths: "",
|
||||
frameSrc: "",
|
||||
frameLoading: true,
|
||||
keepAlive: false,
|
||||
hiddenTag: false,
|
||||
fixedTag: false,
|
||||
showLink: true,
|
||||
showParent: false
|
||||
},
|
||||
{
|
||||
parentId: 203,
|
||||
id: 210,
|
||||
menuType: 3,
|
||||
title: "添加",
|
||||
name: "",
|
||||
@ -739,8 +763,8 @@ export default defineFakeRoute([
|
||||
showParent: false
|
||||
},
|
||||
{
|
||||
parentId: 202,
|
||||
id: 204,
|
||||
parentId: 203,
|
||||
id: 211,
|
||||
menuType: 3,
|
||||
title: "修改",
|
||||
name: "",
|
||||
@ -762,9 +786,105 @@ export default defineFakeRoute([
|
||||
showLink: true,
|
||||
showParent: false
|
||||
},
|
||||
{
|
||||
parentId: 203,
|
||||
id: 212,
|
||||
menuType: 3,
|
||||
title: "删除",
|
||||
name: "",
|
||||
path: "",
|
||||
component: "",
|
||||
rank: null,
|
||||
redirect: "",
|
||||
icon: "",
|
||||
extraIcon: "",
|
||||
enterTransition: "",
|
||||
leaveTransition: "",
|
||||
activePath: "",
|
||||
auths: "permission:btn:delete",
|
||||
frameSrc: "",
|
||||
frameLoading: true,
|
||||
keepAlive: false,
|
||||
hiddenTag: false,
|
||||
fixedTag: false,
|
||||
showLink: true,
|
||||
showParent: false
|
||||
},
|
||||
{
|
||||
parentId: 202,
|
||||
id: 205,
|
||||
id: 204,
|
||||
menuType: 0,
|
||||
title: "menus.purePermissionButtonLogin",
|
||||
name: "PermissionButtonLogin",
|
||||
path: "/permission/button/login",
|
||||
component: "permission/button/perms",
|
||||
rank: null,
|
||||
redirect: "",
|
||||
icon: "",
|
||||
extraIcon: "",
|
||||
enterTransition: "",
|
||||
leaveTransition: "",
|
||||
activePath: "",
|
||||
auths: "",
|
||||
frameSrc: "",
|
||||
frameLoading: true,
|
||||
keepAlive: false,
|
||||
hiddenTag: false,
|
||||
fixedTag: false,
|
||||
showLink: true,
|
||||
showParent: false
|
||||
},
|
||||
{
|
||||
parentId: 204,
|
||||
id: 220,
|
||||
menuType: 3,
|
||||
title: "添加",
|
||||
name: "",
|
||||
path: "",
|
||||
component: "",
|
||||
rank: null,
|
||||
redirect: "",
|
||||
icon: "",
|
||||
extraIcon: "",
|
||||
enterTransition: "",
|
||||
leaveTransition: "",
|
||||
activePath: "",
|
||||
auths: "permission:btn:add",
|
||||
frameSrc: "",
|
||||
frameLoading: true,
|
||||
keepAlive: false,
|
||||
hiddenTag: false,
|
||||
fixedTag: false,
|
||||
showLink: true,
|
||||
showParent: false
|
||||
},
|
||||
{
|
||||
parentId: 204,
|
||||
id: 221,
|
||||
menuType: 3,
|
||||
title: "修改",
|
||||
name: "",
|
||||
path: "",
|
||||
component: "",
|
||||
rank: null,
|
||||
redirect: "",
|
||||
icon: "",
|
||||
extraIcon: "",
|
||||
enterTransition: "",
|
||||
leaveTransition: "",
|
||||
activePath: "",
|
||||
auths: "permission:btn:edit",
|
||||
frameSrc: "",
|
||||
frameLoading: true,
|
||||
keepAlive: false,
|
||||
hiddenTag: false,
|
||||
fixedTag: false,
|
||||
showLink: true,
|
||||
showParent: false
|
||||
},
|
||||
{
|
||||
parentId: 204,
|
||||
id: 222,
|
||||
menuType: 3,
|
||||
title: "删除",
|
||||
name: "",
|
||||
|
||||
68
package.json
68
package.json
@ -50,26 +50,26 @@
|
||||
"@amap/amap-jsapi-loader": "^1.0.1",
|
||||
"@howdyjs/mouse-menu": "^2.1.3",
|
||||
"@infectoone/vue-ganttastic": "^2.3.2",
|
||||
"@logicflow/core": "^1.2.27",
|
||||
"@logicflow/extension": "^1.2.27",
|
||||
"@logicflow/core": "^1.2.28",
|
||||
"@logicflow/extension": "^1.2.28",
|
||||
"@pureadmin/descriptions": "^1.2.1",
|
||||
"@pureadmin/table": "^3.1.2",
|
||||
"@pureadmin/utils": "^2.4.7",
|
||||
"@pureadmin/table": "^3.2.0",
|
||||
"@pureadmin/utils": "^2.4.8",
|
||||
"@vue-flow/background": "^1.3.0",
|
||||
"@vue-flow/core": "^1.39.1",
|
||||
"@vueuse/core": "^10.11.0",
|
||||
"@vue-flow/core": "^1.39.3",
|
||||
"@vueuse/core": "^10.11.1",
|
||||
"@vueuse/motion": "^2.2.3",
|
||||
"@wangeditor/editor": "^5.1.23",
|
||||
"@wangeditor/editor-for-vue": "^5.1.12",
|
||||
"@zxcvbn-ts/core": "^3.0.4",
|
||||
"animate.css": "^4.1.1",
|
||||
"axios": "^1.7.2",
|
||||
"axios": "^1.7.3",
|
||||
"china-area-data": "^5.0.1",
|
||||
"cropperjs": "^1.6.2",
|
||||
"dayjs": "^1.11.12",
|
||||
"echarts": "^5.5.1",
|
||||
"el-table-infinite-scroll": "^3.0.6",
|
||||
"element-plus": "^2.7.8",
|
||||
"element-plus": "^2.8.0",
|
||||
"intro.js": "^7.2.0",
|
||||
"js-cookie": "^3.0.5",
|
||||
"jsbarcode": "^3.11.6",
|
||||
@ -79,23 +79,23 @@
|
||||
"mqtt": "4.3.7",
|
||||
"nprogress": "^0.2.0",
|
||||
"path": "^0.12.7",
|
||||
"pinia": "^2.2.0",
|
||||
"pinyin-pro": "^3.24.0",
|
||||
"plus-pro-components": "^0.1.13",
|
||||
"qrcode": "^1.5.3",
|
||||
"qs": "^6.12.3",
|
||||
"pinia": "^2.2.1",
|
||||
"pinyin-pro": "^3.24.2",
|
||||
"plus-pro-components": "^0.1.14",
|
||||
"qrcode": "^1.5.4",
|
||||
"qs": "^6.13.0",
|
||||
"responsive-storage": "^2.2.0",
|
||||
"sortablejs": "^1.15.2",
|
||||
"swiper": "^11.1.8",
|
||||
"swiper": "^11.1.9",
|
||||
"typeit": "^8.8.4",
|
||||
"v-contextmenu": "^3.2.0",
|
||||
"v3-infinite-loading": "^1.3.1",
|
||||
"version-rocket": "^1.7.1",
|
||||
"vue": "^3.4.34",
|
||||
"version-rocket": "^1.7.2",
|
||||
"vue": "^3.4.37",
|
||||
"vue-i18n": "^9.13.1",
|
||||
"vue-json-pretty": "^2.4.0",
|
||||
"vue-pdf-embed": "^2.1.0",
|
||||
"vue-router": "^4.4.0",
|
||||
"vue-router": "^4.4.3",
|
||||
"vue-tippy": "^6.4.4",
|
||||
"vue-types": "^5.1.3",
|
||||
"vue-virtual-scroller": "2.0.0-beta.8",
|
||||
@ -104,15 +104,15 @@
|
||||
"vue3-puzzle-vcode": "^1.1.7",
|
||||
"vuedraggable": "^4.1.0",
|
||||
"vxe-table": "4.6.17",
|
||||
"wavesurfer.js": "^7.8.2",
|
||||
"wavesurfer.js": "^7.8.3",
|
||||
"xgplayer": "^3.0.19",
|
||||
"xlsx": "^0.18.5"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@commitlint/cli": "^19.3.0",
|
||||
"@commitlint/cli": "^19.4.0",
|
||||
"@commitlint/config-conventional": "^19.2.2",
|
||||
"@commitlint/types": "^19.0.3",
|
||||
"@eslint/js": "^9.8.0",
|
||||
"@eslint/js": "^9.9.0",
|
||||
"@faker-js/faker": "^8.4.1",
|
||||
"@iconify-icons/ep": "^1.2.12",
|
||||
"@iconify-icons/ri": "^1.2.10",
|
||||
@ -123,44 +123,44 @@
|
||||
"@types/gradient-string": "^1.1.6",
|
||||
"@types/intro.js": "^5.1.5",
|
||||
"@types/js-cookie": "^3.0.6",
|
||||
"@types/node": "^20.14.13",
|
||||
"@types/node": "^20.14.15",
|
||||
"@types/nprogress": "^0.2.3",
|
||||
"@types/qrcode": "^1.5.5",
|
||||
"@types/qs": "^6.9.15",
|
||||
"@types/sortablejs": "^1.15.8",
|
||||
"@typescript-eslint/eslint-plugin": "^7.17.0",
|
||||
"@typescript-eslint/parser": "^7.17.0",
|
||||
"@vitejs/plugin-vue": "^5.1.1",
|
||||
"@typescript-eslint/eslint-plugin": "^7.18.0",
|
||||
"@typescript-eslint/parser": "^7.18.0",
|
||||
"@vitejs/plugin-vue": "^5.1.2",
|
||||
"@vitejs/plugin-vue-jsx": "^4.0.0",
|
||||
"autoprefixer": "^10.4.19",
|
||||
"autoprefixer": "^10.4.20",
|
||||
"boxen": "^7.1.1",
|
||||
"cssnano": "^7.0.4",
|
||||
"cssnano": "^7.0.5",
|
||||
"dagre": "^0.8.5",
|
||||
"eslint": "^9.8.0",
|
||||
"eslint": "^9.9.0",
|
||||
"eslint-config-prettier": "^9.1.0",
|
||||
"eslint-define-config": "^2.1.0",
|
||||
"eslint-plugin-prettier": "^5.2.1",
|
||||
"eslint-plugin-vue": "^9.27.0",
|
||||
"gradient-string": "^2.0.2",
|
||||
"husky": "^9.1.3",
|
||||
"lint-staged": "^15.2.7",
|
||||
"postcss": "^8.4.40",
|
||||
"husky": "^9.1.4",
|
||||
"lint-staged": "^15.2.8",
|
||||
"postcss": "^8.4.41",
|
||||
"postcss-html": "^1.7.0",
|
||||
"postcss-import": "^16.1.0",
|
||||
"postcss-scss": "^4.0.9",
|
||||
"prettier": "^3.3.3",
|
||||
"rimraf": "^5.0.9",
|
||||
"rimraf": "^5.0.10",
|
||||
"rollup-plugin-visualizer": "^5.12.0",
|
||||
"sass": "^1.77.8",
|
||||
"stylelint": "^16.7.0",
|
||||
"stylelint": "^16.8.1",
|
||||
"stylelint-config-recess-order": "^5.0.1",
|
||||
"stylelint-config-recommended-vue": "^1.5.0",
|
||||
"stylelint-config-standard-scss": "^13.1.0",
|
||||
"stylelint-prettier": "^5.0.2",
|
||||
"svgo": "^3.3.2",
|
||||
"tailwindcss": "^3.4.7",
|
||||
"tailwindcss": "^3.4.9",
|
||||
"typescript": "^5.5.4",
|
||||
"vite": "^5.3.5",
|
||||
"vite": "^5.4.0",
|
||||
"vite-plugin-cdn-import": "^1.0.1",
|
||||
"vite-plugin-checker": "^0.7.2",
|
||||
"vite-plugin-compression": "^0.5.1",
|
||||
|
||||
2262
pnpm-lock.yaml
generated
2262
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
@ -11,6 +11,8 @@ export type UserResult = {
|
||||
nickname: string;
|
||||
/** 当前登录用户的角色 */
|
||||
roles: Array<string>;
|
||||
/** 按钮级别权限 */
|
||||
permissions: Array<string>;
|
||||
/** `token` */
|
||||
accessToken: string;
|
||||
/** 用于调用刷新`accessToken`的接口时所需的`token` */
|
||||
|
||||
@ -53,14 +53,17 @@ const footerButtons = computed(() => {
|
||||
}
|
||||
);
|
||||
}
|
||||
const done = () => {
|
||||
const closeLoading = () => {
|
||||
if (options?.sureBtnLoading) {
|
||||
sureBtnMap.value[index].loading = false;
|
||||
}
|
||||
};
|
||||
const done = () => {
|
||||
closeLoading();
|
||||
closeDialog(options, index, { command: "sure" });
|
||||
};
|
||||
if (options?.beforeSure && isFunction(options?.beforeSure)) {
|
||||
options.beforeSure(done, { options, index });
|
||||
options.beforeSure(done, { options, index, closeLoading });
|
||||
} else {
|
||||
done();
|
||||
}
|
||||
|
||||
@ -69,11 +69,11 @@ type DialogProps = {
|
||||
type Popconfirm = {
|
||||
/** 标题 */
|
||||
title?: string;
|
||||
/** 确认按钮文字 */
|
||||
/** 确定按钮文字 */
|
||||
confirmButtonText?: string;
|
||||
/** 取消按钮文字 */
|
||||
cancelButtonText?: string;
|
||||
/** 确认按钮类型，默认 `primary` */
|
||||
/** 确定按钮类型，默认 `primary` */
|
||||
confirmButtonType?: ButtonType;
|
||||
/** 取消按钮类型，默认 `text` */
|
||||
cancelButtonType?: ButtonType;
|
||||
@ -121,7 +121,7 @@ type ButtonProps = {
|
||||
round?: boolean;
|
||||
/** 是否为圆形按钮，默认 `false` */
|
||||
circle?: boolean;
|
||||
/** 确认按钮的 `Popconfirm` 气泡确认框相关配置 */
|
||||
/** 确定按钮的 `Popconfirm` 气泡确认框相关配置 */
|
||||
popconfirm?: Popconfirm;
|
||||
/** 是否为加载中状态，默认 `false` */
|
||||
loading?: boolean;
|
||||
@ -160,9 +160,9 @@ interface DialogOptions extends DialogProps {
|
||||
props?: any;
|
||||
/** 是否隐藏 `Dialog` 按钮操作区的内容 */
|
||||
hideFooter?: boolean;
|
||||
/** 确认按钮的 `Popconfirm` 气泡确认框相关配置 */
|
||||
/** 确定按钮的 `Popconfirm` 气泡确认框相关配置 */
|
||||
popconfirm?: Popconfirm;
|
||||
/** 点击确认按钮后是否开启 `loading` 加载动画 */
|
||||
/** 点击确定按钮后是否开启 `loading` 加载动画 */
|
||||
sureBtnLoading?: boolean;
|
||||
/**
|
||||
* @description 自定义对话框标题的内容渲染器
|
||||
@ -261,10 +261,13 @@ interface DialogOptions extends DialogProps {
|
||||
done: Function,
|
||||
{
|
||||
options,
|
||||
index
|
||||
index,
|
||||
closeLoading
|
||||
}: {
|
||||
options: DialogOptions;
|
||||
index: number;
|
||||
/** 关闭确定按钮的 `loading` 加载动画 */
|
||||
closeLoading: Function;
|
||||
}
|
||||
) => void;
|
||||
}
|
||||
|
||||
@ -194,7 +194,7 @@ watch(
|
||||
:pager-count="5"
|
||||
layout="pager"
|
||||
background
|
||||
small
|
||||
size="small"
|
||||
@current-change="onCurrentChange"
|
||||
/>
|
||||
<el-button
|
||||
|
||||
5
src/components/RePerms/index.ts
Normal file
5
src/components/RePerms/index.ts
Normal file
@ -0,0 +1,5 @@
|
||||
import perms from "./src/perms";
|
||||
|
||||
const Perms = perms;
|
||||
|
||||
export { Perms };
|
||||
20
src/components/RePerms/src/perms.tsx
Normal file
20
src/components/RePerms/src/perms.tsx
Normal file
@ -0,0 +1,20 @@
|
||||
import { defineComponent, Fragment } from "vue";
|
||||
import { hasPerms } from "@/utils/auth";
|
||||
|
||||
export default defineComponent({
|
||||
name: "Perms",
|
||||
props: {
|
||||
value: {
|
||||
type: undefined,
|
||||
default: []
|
||||
}
|
||||
},
|
||||
setup(props, { slots }) {
|
||||
return () => {
|
||||
if (!slots) return null;
|
||||
return hasPerms(props.value) ? (
|
||||
<Fragment>{slots.default?.()}</Fragment>
|
||||
) : null;
|
||||
};
|
||||
}
|
||||
});
|
||||
@ -2,4 +2,5 @@ export * from "./auth";
|
||||
export * from "./copy";
|
||||
export * from "./longpress";
|
||||
export * from "./optimize";
|
||||
export * from "./perms";
|
||||
export * from "./ripple";
|
||||
|
||||
15
src/directives/perms/index.ts
Normal file
15
src/directives/perms/index.ts
Normal file
@ -0,0 +1,15 @@
|
||||
import { hasPerms } from "@/utils/auth";
|
||||
import type { Directive, DirectiveBinding } from "vue";
|
||||
|
||||
export const perms: Directive = {
|
||||
mounted(el: HTMLElement, binding: DirectiveBinding<string | Array<string>>) {
|
||||
const { value } = binding;
|
||||
if (value) {
|
||||
!hasPerms(value) && el.parentNode?.removeChild(el);
|
||||
} else {
|
||||
throw new Error(
|
||||
"[Directive: perms]: need perms! Like v-perms=\"['btn.add','btn.edit']\""
|
||||
);
|
||||
}
|
||||
}
|
||||
};
|
||||
@ -44,7 +44,9 @@ app.component("FontIcon", FontIcon);
|
||||
|
||||
// 全局注册按钮级别权限组件
|
||||
import { Auth } from "@/components/ReAuth";
|
||||
import { Perms } from "@/components/RePerms";
|
||||
app.component("Auth", Auth);
|
||||
app.component("Perms", Perms);
|
||||
|
||||
// 全局注册vue-tippy
|
||||
import "tippy.js/dist/tippy.css";
|
||||
|
||||
@ -355,7 +355,7 @@ function getAuths(): Array<string> {
|
||||
return router.currentRoute.value.meta.auths as Array<string>;
|
||||
}
|
||||
|
||||
/** 是否有按钮级别的权限 */
|
||||
/** 是否有按钮级别的权限（根据路由`meta`中的`auths`字段进行判断）*/
|
||||
function hasAuth(value: string | Array<string>): boolean {
|
||||
if (!value) return false;
|
||||
/** 从当前路由的`meta`字段里获取按钮级别的所有自定义`code`值 */
|
||||
|
||||
@ -27,6 +27,9 @@ export const useUserStore = defineStore({
|
||||
nickname: storageLocal().getItem<DataInfo<number>>(userKey)?.nickname ?? "",
|
||||
// 页面级别权限
|
||||
roles: storageLocal().getItem<DataInfo<number>>(userKey)?.roles ?? [],
|
||||
// 按钮级别权限
|
||||
permissions:
|
||||
storageLocal().getItem<DataInfo<number>>(userKey)?.permissions ?? [],
|
||||
// 前端生成的验证码（按实际需求替换）
|
||||
verifyCode: "",
|
||||
// 判断登录页面显示哪个组件（0：登录（默认）、1：手机登录、2：二维码登录、3：注册、4：忘记密码）
|
||||
@ -53,6 +56,10 @@ export const useUserStore = defineStore({
|
||||
SET_ROLES(roles: Array<string>) {
|
||||
this.roles = roles;
|
||||
},
|
||||
/** 存储按钮级别权限 */
|
||||
SET_PERMS(permissions: Array<string>) {
|
||||
this.permissions = permissions;
|
||||
},
|
||||
/** 存储前端生成的验证码 */
|
||||
SET_VERIFYCODE(verifyCode: string) {
|
||||
this.verifyCode = verifyCode;
|
||||
@ -86,6 +93,7 @@ export const useUserStore = defineStore({
|
||||
logOut() {
|
||||
this.username = "";
|
||||
this.roles = [];
|
||||
this.permissions = [];
|
||||
removeToken();
|
||||
useMultiTagsStoreHook().handleTags("equal", [...routerArrays]);
|
||||
resetRouter();
|
||||
|
||||
@ -42,6 +42,7 @@ export type userType = {
|
||||
username?: string;
|
||||
nickname?: string;
|
||||
roles?: Array<string>;
|
||||
permissions?: Array<string>;
|
||||
verifyCode?: string;
|
||||
currentPage?: number;
|
||||
isRemembered?: boolean;
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import Cookies from "js-cookie";
|
||||
import { storageLocal } from "@pureadmin/utils";
|
||||
import { useUserStoreHook } from "@/store/modules/user";
|
||||
import { storageLocal, isString, isIncludeAllChildren } from "@pureadmin/utils";
|
||||
|
||||
export interface DataInfo<T> {
|
||||
/** token */
|
||||
@ -17,6 +17,8 @@ export interface DataInfo<T> {
|
||||
nickname?: string;
|
||||
/** 当前登录用户的角色 */
|
||||
roles?: Array<string>;
|
||||
/** 当前登录用户的按钮级别权限 */
|
||||
permissions?: Array<string>;
|
||||
}
|
||||
|
||||
export const userKey = "user-info";
|
||||
@ -41,7 +43,7 @@ export function getToken(): DataInfo<number> {
|
||||
* @description 设置`token`以及一些必要信息并采用无感刷新`token`方案
|
||||
* 无感刷新：后端返回`accessToken`（访问接口使用的`token`）、`refreshToken`（用于调用刷新`accessToken`的接口时所需的`token`，`refreshToken`的过期时间（比如30天）应大于`accessToken`的过期时间（比如2小时））、`expires`（`accessToken`的过期时间）
|
||||
* 将`accessToken`、`expires`、`refreshToken`这三条信息放在key值为authorized-token的cookie里（过期自动销毁）
|
||||
* 将`avatar`、`username`、`nickname`、`roles`、`refreshToken`、`expires`这六条信息放在key值为`user-info`的localStorage里（利用`multipleTabsKey`当浏览器完全关闭后自动销毁）
|
||||
* 将`avatar`、`username`、`nickname`、`roles`、`permissions`、`refreshToken`、`expires`这七条信息放在key值为`user-info`的localStorage里（利用`multipleTabsKey`当浏览器完全关闭后自动销毁）
|
||||
*/
|
||||
export function setToken(data: DataInfo<Date>) {
|
||||
let expires = 0;
|
||||
@ -66,18 +68,20 @@ export function setToken(data: DataInfo<Date>) {
|
||||
: {}
|
||||
);
|
||||
|
||||
function setUserKey({ avatar, username, nickname, roles }) {
|
||||
function setUserKey({ avatar, username, nickname, roles, permissions }) {
|
||||
useUserStoreHook().SET_AVATAR(avatar);
|
||||
useUserStoreHook().SET_USERNAME(username);
|
||||
useUserStoreHook().SET_NICKNAME(nickname);
|
||||
useUserStoreHook().SET_ROLES(roles);
|
||||
useUserStoreHook().SET_PERMS(permissions);
|
||||
storageLocal().setItem(userKey, {
|
||||
refreshToken,
|
||||
expires,
|
||||
avatar,
|
||||
username,
|
||||
nickname,
|
||||
roles
|
||||
roles,
|
||||
permissions
|
||||
});
|
||||
}
|
||||
|
||||
@ -87,7 +91,8 @@ export function setToken(data: DataInfo<Date>) {
|
||||
avatar: data?.avatar ?? "",
|
||||
username,
|
||||
nickname: data?.nickname ?? "",
|
||||
roles
|
||||
roles,
|
||||
permissions: data?.permissions ?? []
|
||||
});
|
||||
} else {
|
||||
const avatar =
|
||||
@ -98,11 +103,14 @@ export function setToken(data: DataInfo<Date>) {
|
||||
storageLocal().getItem<DataInfo<number>>(userKey)?.nickname ?? "";
|
||||
const roles =
|
||||
storageLocal().getItem<DataInfo<number>>(userKey)?.roles ?? [];
|
||||
const permissions =
|
||||
storageLocal().getItem<DataInfo<number>>(userKey)?.permissions ?? [];
|
||||
setUserKey({
|
||||
avatar,
|
||||
username,
|
||||
nickname,
|
||||
roles
|
||||
roles,
|
||||
permissions
|
||||
});
|
||||
}
|
||||
}
|
||||
@ -118,3 +126,16 @@ export function removeToken() {
|
||||
export const formatToken = (token: string): string => {
|
||||
return "Bearer " + token;
|
||||
};
|
||||
|
||||
/** 是否有按钮级别的权限（根据登录接口返回的`permissions`字段进行判断）*/
|
||||
export const hasPerms = (value: string | Array<string>): boolean => {
|
||||
if (!value) return false;
|
||||
const allPerms = "*:*:*";
|
||||
const { permissions } = useUserStoreHook();
|
||||
if (!permissions) return false;
|
||||
if (permissions.length === 1 && permissions[0] === allPerms) return true;
|
||||
const isAuths = isString(value)
|
||||
? permissions.includes(value)
|
||||
: isIncludeAllChildren(value, permissions);
|
||||
return isAuths ? true : false;
|
||||
};
|
||||
|
||||
@ -456,7 +456,9 @@ function onSureBtnLoading() {
|
||||
sureBtnLoading: true,
|
||||
title: "点击底部确定按钮可开启按钮动画",
|
||||
contentRenderer: () => <p>弹框内容-点击底部确定按钮可开启按钮动画</p>,
|
||||
beforeSure: done => {
|
||||
beforeSure: (done, { closeLoading }) => {
|
||||
// closeLoading() // 关闭确定按钮动画，不关闭弹框
|
||||
// done() // 关闭确定按钮动画并关闭弹框
|
||||
setTimeout(() => done(), 800);
|
||||
}
|
||||
});
|
||||
|
||||
@ -133,8 +133,7 @@ const {
|
||||
:adaptiveConfig="{ offsetBottom: 108 }"
|
||||
:data="dataList"
|
||||
:columns="dynamicColumns"
|
||||
:pagination="pagination"
|
||||
:paginationSmall="size === 'small' ? true : false"
|
||||
:pagination="{ ...pagination, size }"
|
||||
:header-cell-style="{
|
||||
background: 'var(--el-fill-color-light)',
|
||||
color: 'var(--el-text-color-primary)'
|
||||
|
||||
@ -133,8 +133,7 @@ const {
|
||||
:adaptiveConfig="{ offsetBottom: 108 }"
|
||||
:data="dataList"
|
||||
:columns="dynamicColumns"
|
||||
:pagination="pagination"
|
||||
:paginationSmall="size === 'small' ? true : false"
|
||||
:pagination="{ ...pagination, size }"
|
||||
:header-cell-style="{
|
||||
background: 'var(--el-fill-color-light)',
|
||||
color: 'var(--el-text-color-primary)'
|
||||
|
||||
@ -125,8 +125,7 @@ const {
|
||||
:adaptiveConfig="{ offsetBottom: 108 }"
|
||||
:data="dataList"
|
||||
:columns="dynamicColumns"
|
||||
:pagination="pagination"
|
||||
:paginationSmall="size === 'small' ? true : false"
|
||||
:pagination="{ ...pagination, size }"
|
||||
:header-cell-style="{
|
||||
background: 'var(--el-fill-color-light)',
|
||||
color: 'var(--el-text-color-primary)'
|
||||
|
||||
@ -74,8 +74,7 @@ const {
|
||||
:adaptiveConfig="{ offsetBottom: 108 }"
|
||||
:data="dataList"
|
||||
:columns="dynamicColumns"
|
||||
:pagination="pagination"
|
||||
:paginationSmall="size === 'small' ? true : false"
|
||||
:pagination="{ ...pagination, size }"
|
||||
:header-cell-style="{
|
||||
background: 'var(--el-fill-color-light)',
|
||||
color: 'var(--el-text-color-primary)'
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
import { hasAuth, getAuths } from "@/router/utils";
|
||||
|
||||
defineOptions({
|
||||
name: "PermissionButton"
|
||||
name: "PermissionButtonRouter"
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
116
src/views/permission/button/perms.vue
Normal file
116
src/views/permission/button/perms.vue
Normal file
@ -0,0 +1,116 @@
|
||||
<script setup lang="ts">
|
||||
import { hasPerms } from "@/utils/auth";
|
||||
import { useUserStoreHook } from "@/store/modules/user";
|
||||
|
||||
const { permissions } = useUserStoreHook();
|
||||
|
||||
defineOptions({
|
||||
name: "PermissionButtonLogin"
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<p class="mb-2">当前拥有的code列表：{{ permissions }}</p>
|
||||
<p v-show="permissions?.[0] === '*:*:*'" class="mb-2">
|
||||
*:*:* 代表拥有全部按钮级别权限
|
||||
</p>
|
||||
|
||||
<el-card shadow="never" class="mb-2">
|
||||
<template #header>
|
||||
<div class="card-header">组件方式判断权限</div>
|
||||
<el-link
|
||||
class="mt-2"
|
||||
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/permission/button/perms.vue"
|
||||
target="_blank"
|
||||
>
|
||||
代码位置 src/views/permission/button/perms.vue
|
||||
</el-link>
|
||||
</template>
|
||||
<el-space wrap>
|
||||
<Perms value="permission:btn:add">
|
||||
<el-button plain type="warning">
|
||||
拥有code：'permission:btn:add' 权限可见
|
||||
</el-button>
|
||||
</Perms>
|
||||
<Perms :value="['permission:btn:edit']">
|
||||
<el-button plain type="primary">
|
||||
拥有code：['permission:btn:edit'] 权限可见
|
||||
</el-button>
|
||||
</Perms>
|
||||
<Perms
|
||||
:value="[
|
||||
'permission:btn:add',
|
||||
'permission:btn:edit',
|
||||
'permission:btn:delete'
|
||||
]"
|
||||
>
|
||||
<el-button plain type="danger">
|
||||
拥有code：['permission:btn:add', 'permission:btn:edit',
|
||||
'permission:btn:delete'] 权限可见
|
||||
</el-button>
|
||||
</Perms>
|
||||
</el-space>
|
||||
</el-card>
|
||||
|
||||
<el-card shadow="never" class="mb-2">
|
||||
<template #header>
|
||||
<div class="card-header">函数方式判断权限</div>
|
||||
</template>
|
||||
<el-space wrap>
|
||||
<el-button v-if="hasPerms('permission:btn:add')" plain type="warning">
|
||||
拥有code：'permission:btn:add' 权限可见
|
||||
</el-button>
|
||||
<el-button
|
||||
v-if="hasPerms(['permission:btn:edit'])"
|
||||
plain
|
||||
type="primary"
|
||||
>
|
||||
拥有code：['permission:btn:edit'] 权限可见
|
||||
</el-button>
|
||||
<el-button
|
||||
v-if="
|
||||
hasPerms([
|
||||
'permission:btn:add',
|
||||
'permission:btn:edit',
|
||||
'permission:btn:delete'
|
||||
])
|
||||
"
|
||||
plain
|
||||
type="danger"
|
||||
>
|
||||
拥有code：['permission:btn:add', 'permission:btn:edit',
|
||||
'permission:btn:delete'] 权限可见
|
||||
</el-button>
|
||||
</el-space>
|
||||
</el-card>
|
||||
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
指令方式判断权限（该方式不能动态修改权限）
|
||||
</div>
|
||||
</template>
|
||||
<el-space wrap>
|
||||
<el-button v-perms="'permission:btn:add'" plain type="warning">
|
||||
拥有code：'permission:btn:add' 权限可见
|
||||
</el-button>
|
||||
<el-button v-perms="['permission:btn:edit']" plain type="primary">
|
||||
拥有code：['permission:btn:edit'] 权限可见
|
||||
</el-button>
|
||||
<el-button
|
||||
v-perms="[
|
||||
'permission:btn:add',
|
||||
'permission:btn:edit',
|
||||
'permission:btn:delete'
|
||||
]"
|
||||
plain
|
||||
type="danger"
|
||||
>
|
||||
拥有code：['permission:btn:add', 'permission:btn:edit',
|
||||
'permission:btn:delete'] 权限可见
|
||||
</el-button>
|
||||
</el-space>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
@ -173,8 +173,7 @@ onMounted(() => {
|
||||
:adaptiveConfig="{ offsetBottom: 108 }"
|
||||
:data="dataList"
|
||||
:columns="dynamicColumns"
|
||||
:pagination="pagination"
|
||||
:paginationSmall="size === 'small' ? true : false"
|
||||
:pagination="{ ...pagination, size }"
|
||||
:header-cell-style="{
|
||||
background: 'var(--el-fill-color-light)',
|
||||
color: 'var(--el-text-color-primary)'
|
||||
|
||||
@ -160,8 +160,7 @@ const {
|
||||
:size="size"
|
||||
:data="dataList"
|
||||
:columns="dynamicColumns"
|
||||
:pagination="pagination"
|
||||
:paginationSmall="size === 'small' ? true : false"
|
||||
:pagination="{ ...pagination, size }"
|
||||
:header-cell-style="{
|
||||
background: 'var(--el-fill-color-light)',
|
||||
color: 'var(--el-text-color-primary)'
|
||||
|
||||
@ -116,7 +116,11 @@ const columns: TableColumnList = [
|
||||
border
|
||||
lazy
|
||||
:load="load"
|
||||
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
|
||||
:tree-props="{
|
||||
hasChildren: 'hasChildren',
|
||||
children: 'children',
|
||||
checkStrictly: false
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -33,7 +33,7 @@ export function useColumns() {
|
||||
total: 0,
|
||||
align: "right",
|
||||
background: true,
|
||||
small: false
|
||||
size: "default"
|
||||
});
|
||||
|
||||
/** 加载动画配置 */
|
||||
|
||||
@ -9,7 +9,6 @@ export function useColumns() {
|
||||
const select = ref("no");
|
||||
const hideVal = ref("nohide");
|
||||
const tableSize = ref("default");
|
||||
const paginationSmall = ref(false);
|
||||
const paginationAlign = ref("right");
|
||||
const columns: TableColumnList = [
|
||||
{
|
||||
@ -43,7 +42,7 @@ export function useColumns() {
|
||||
total: 0,
|
||||
align: "right",
|
||||
background: true,
|
||||
small: false
|
||||
size: "default"
|
||||
});
|
||||
|
||||
/** 加载动画配置 */
|
||||
@ -65,7 +64,7 @@ export function useColumns() {
|
||||
});
|
||||
|
||||
function onChange(val) {
|
||||
pagination.small = val;
|
||||
pagination.size = val;
|
||||
}
|
||||
|
||||
function onSizeChange(val) {
|
||||
@ -108,7 +107,6 @@ export function useColumns() {
|
||||
pagination,
|
||||
loadingConfig,
|
||||
paginationAlign,
|
||||
paginationSmall,
|
||||
onChange,
|
||||
onSizeChange,
|
||||
onCurrentChange
|
||||
|
||||
@ -11,7 +11,6 @@ const {
|
||||
pagination,
|
||||
loadingConfig,
|
||||
paginationAlign,
|
||||
paginationSmall,
|
||||
onChange,
|
||||
onSizeChange,
|
||||
onCurrentChange
|
||||
@ -43,9 +42,10 @@ const {
|
||||
</el-radio-group>
|
||||
<el-divider direction="vertical" />
|
||||
<p class="text-sm">分页大小：</p>
|
||||
<el-radio-group v-model="paginationSmall" size="small" @change="onChange">
|
||||
<el-radio-button :value="false">no small</el-radio-button>
|
||||
<el-radio-button :value="true">small</el-radio-button>
|
||||
<el-radio-group v-model="pagination.size" size="small" @change="onChange">
|
||||
<el-radio-button value="large">large</el-radio-button>
|
||||
<el-radio-button value="default">default</el-radio-button>
|
||||
<el-radio-button value="small">small</el-radio-button>
|
||||
</el-radio-group>
|
||||
<el-divider direction="vertical" />
|
||||
<p class="text-sm">分页的对齐方式：</p>
|
||||
|
||||
@ -59,7 +59,7 @@ export function useColumns(selectRef: Ref, formRef: Ref, tableRef: Ref) {
|
||||
layout: "prev, pager, next",
|
||||
total: tableData.value.length,
|
||||
background: true,
|
||||
small: true
|
||||
size: "small"
|
||||
});
|
||||
|
||||
const handleSelectionChange = val => {
|
||||
|
||||
@ -33,7 +33,7 @@ export function useColumns(selectRef: Ref) {
|
||||
layout: "prev, pager, next",
|
||||
total: tableDataEdit.length,
|
||||
background: true,
|
||||
small: true
|
||||
size: "small"
|
||||
});
|
||||
|
||||
/** 高亮当前选中行 */
|
||||
|
||||
4
types/directives.d.ts
vendored
4
types/directives.d.ts
vendored
@ -5,7 +5,7 @@ declare module "vue" {
|
||||
export interface ComponentCustomProperties {
|
||||
/** `Loading` 动画加载指令，具体看：https://element-plus.org/zh-CN/component/loading.html#%E6%8C%87%E4%BB%A4 */
|
||||
vLoading: Directive<Element, boolean>;
|
||||
/** 按钮权限指令 */
|
||||
/** 按钮权限指令（根据路由`meta`中的`auths`字段进行判断）*/
|
||||
vAuth: Directive<HTMLElement, string | Array<string>>;
|
||||
/** 文本复制指令（默认双击复制） */
|
||||
vCopy: Directive<CopyEl, string>;
|
||||
@ -13,6 +13,8 @@ declare module "vue" {
|
||||
vLongpress: Directive<HTMLElement, Function>;
|
||||
/** 防抖、节流指令 */
|
||||
vOptimize: Directive<HTMLElement, OptimizeOptions>;
|
||||
/** 按钮权限指令（根据登录接口返回的`permissions`字段进行判断）*/
|
||||
vPerms: Directive<HTMLElement, string | Array<string>>;
|
||||
/**
|
||||
* `v-ripple`指令，用法如下：
|
||||
* 1. `v-ripple`代表启用基本的`ripple`功能
|
||||
|
||||
1
types/global-components.d.ts
vendored
1
types/global-components.d.ts
vendored
@ -7,6 +7,7 @@ declare module "vue" {
|
||||
IconifyIconOnline: (typeof import("../src/components/ReIcon"))["IconifyIconOnline"];
|
||||
FontIcon: (typeof import("../src/components/ReIcon"))["FontIcon"];
|
||||
Auth: (typeof import("../src/components/ReAuth"))["Auth"];
|
||||
Perms: (typeof import("../src/components/RePerms"))["Perms"];
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user