From ad1de9530a0947cdcef8be9a1d64332c08feea08 Mon Sep 17 00:00:00 2001 From: xiaoxian521 <1923740402@qq.com> Date: Wed, 30 Jun 2021 14:29:40 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E6=8C=89=E9=92=AE?= =?UTF-8?q?=E6=9D=83=E9=99=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- mock/asyncRoutes.ts | 47 +++++++++++++++++-- src/directives/index.ts | 1 + src/directives/permission/index.ts | 17 +++++++ src/main.ts | 14 +++++- src/plugins/element-plus/index.ts | 4 ++ src/router/index.ts | 13 +++-- src/router/modules/permission.ts | 39 --------------- src/store/modules/permission.ts | 16 +++++++ src/views/permission/button.vue | 15 ------ src/views/permission/button/index.vue | 38 +++++++++++++++ .../permission/{page.vue => page/index.vue} | 5 +- 11 files changed, 137 insertions(+), 72 deletions(-) create mode 100644 src/directives/index.ts create mode 100644 src/directives/permission/index.ts delete mode 100644 src/router/modules/permission.ts delete mode 100644 src/views/permission/button.vue create mode 100644 src/views/permission/button/index.vue rename src/views/permission/{page.vue => page/index.vue} (93%) diff --git a/mock/asyncRoutes.ts b/mock/asyncRoutes.ts index 2d9ffa6fc..2eb386bd7 100644 --- a/mock/asyncRoutes.ts +++ b/mock/asyncRoutes.ts @@ -5,7 +5,6 @@ import { MockMethod } from "vite-plugin-mock"; const systemRouter = { path: "/system", name: "system", - // component: Layout, redirect: "/system/user", meta: { icon: "el-icon-setting", @@ -18,7 +17,6 @@ const systemRouter = { { path: "/system/user", name: "user", - // component: () => import("/@/views/system/user/index.vue"), meta: { title: "message.hsBaseinfo", showLink: true, @@ -28,7 +26,6 @@ const systemRouter = { { path: "/system/dict", name: "dict", - // component: () => import("/@/views/system/dict/index.vue"), meta: { title: "message.hsDict", showLink: true, @@ -38,6 +35,46 @@ const systemRouter = { ], }; +const permissionRouter = { + path: "/permission", + name: "permission", + redirect: "/permission/page", + meta: { + title: "message.permission", + icon: "el-icon-lollipop", + showLink: true, + savedPosition: true, + rank: 3, + }, + children: [ + { + path: "/permission/page", + name: "permissionPage", + meta: { + title: "message.permissionPage", + showLink: true, + savedPosition: true, + }, + }, + { + path: "/permission/button", + name: "permissionButton", + meta: { + title: "message.permissionButton", + showLink: true, + savedPosition: true, + authority: [], + }, + }, + ], +}; + +// 添加不同按钮权限到/permission/button页面中 +function setDifAuthority(authority, routes) { + routes.children[1].meta.authority = [authority]; + return routes; +} + export default [ { url: "/getAsyncRoutes", @@ -46,12 +83,12 @@ export default [ if (query.name === "admin") { return { code: 0, - info: systemRouter, + info: [systemRouter, setDifAuthority("v-admin", permissionRouter)], }; } else { return { code: 0, - info: [], + info: [setDifAuthority("v-test", permissionRouter)], }; } }, diff --git a/src/directives/index.ts b/src/directives/index.ts new file mode 100644 index 000000000..28bf86ee4 --- /dev/null +++ b/src/directives/index.ts @@ -0,0 +1 @@ +export * from "./permission"; diff --git a/src/directives/permission/index.ts b/src/directives/permission/index.ts new file mode 100644 index 000000000..82b9930f3 --- /dev/null +++ b/src/directives/permission/index.ts @@ -0,0 +1,17 @@ +import { usePermissionStoreHook } from "/@/store/modules/permission"; +import { Directive } from "vue"; + +export const auth: Directive = { + mounted(el, binding) { + const { value } = binding; + if (value) { + const authRoles = value; + const hasAuth = usePermissionStoreHook().buttonAuth.includes(authRoles); + if (!hasAuth) { + el.style.display = "none"; + } + } else { + throw new Error("need roles! Like v-auth=\"['admin','test']\""); + } + }, +}; diff --git a/src/main.ts b/src/main.ts index 21504a10a..b1cc92e91 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1,4 +1,4 @@ -import { createApp } from "vue"; +import { createApp, Directive } from "vue"; import App from "./App.vue"; import router from "./router"; import { setupStore } from "/@/store"; @@ -43,6 +43,12 @@ app.use(Storage, { }, }); +// 自定义指令 +import * as directives from "/@/directives"; +Object.keys(directives).forEach((key) => { + app.directive(key, (directives as { [key: string]: Directive })[key]); +}); + // 获取项目动态全局配置 export const getServerConfig = async (): Promise => { return axios({ @@ -74,7 +80,11 @@ export const getServerConfig = async (): Promise => { getServerConfig().then(async () => { setupStore(app); - app.use(router).use(useElementPlus).use(useTable).use(usI18n); + app + .use(router) + .use(useElementPlus) + .use(useTable) + .use(usI18n); await router.isReady(); diff --git a/src/plugins/element-plus/index.ts b/src/plugins/element-plus/index.ts index 138b03358..ea5913aa7 100644 --- a/src/plugins/element-plus/index.ts +++ b/src/plugins/element-plus/index.ts @@ -29,6 +29,8 @@ import { ElDrawer, ElPagination, ElAlert, + ElRadioButton, + ElRadioGroup, } from "element-plus"; import "element-plus/packages/theme-chalk/src/base.scss"; @@ -61,6 +63,8 @@ const components = [ ElDrawer, ElPagination, ElAlert, + ElRadioButton, + ElRadioGroup, ]; const plugins = [ElLoading]; diff --git a/src/router/index.ts b/src/router/index.ts index b3be76f1e..88ac5af9c 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -6,7 +6,6 @@ import editorRouter from "./modules/editor"; import componentsRouter from "./modules/components"; import nestedRouter from "./modules/nested"; import errorRouter from "./modules/error"; -import permissionRouter from "./modules/permission"; import externalLink from "./modules/externalLink"; import remainingRouter from "./modules/remaining"; //静态路由 @@ -26,7 +25,6 @@ const constantRoutes: Array = [ editorRouter, componentsRouter, nestedRouter, - permissionRouter, externalLink, errorRouter, ]; @@ -83,7 +81,7 @@ export const initRouter = (name, next?, to?) => { if (info.length === 0) { usePermissionStoreHook().changeSetting(info); } else { - addAsyncRoutes([info]).map((v: any) => { + addAsyncRoutes(info).map((v: any) => { // 防止重复添加路由 if ( router.options.routes.findIndex( @@ -99,8 +97,8 @@ export const initRouter = (name, next?, to?) => { router.addRoute(v.name, v); if (next && to) next({ ...to, replace: true }); usePermissionStoreHook().changeSetting(info); - resolve(router); } + resolve(router); }); } router.addRoute({ @@ -135,9 +133,10 @@ router.beforeEach((to, _from, next) => { if (_from?.name) { next(); } else { - initRouter(name.username, next, to).then((router: Router) => { - router.push(to.path); - }); + if (usePermissionStoreHook().wholeRoutes.length === 0) + initRouter(name.username, next, to).then((router: Router) => { + router.push(to.path); + }); next(); } } else { diff --git a/src/router/modules/permission.ts b/src/router/modules/permission.ts deleted file mode 100644 index 75e138f5e..000000000 --- a/src/router/modules/permission.ts +++ /dev/null @@ -1,39 +0,0 @@ -import Layout from "/@/layout/index.vue"; - -const permissionRouter = { - path: "/permission", - component: Layout, - redirect: "/permission/page", - name: "permission", - meta: { - title: "message.permission", - icon: "el-icon-lollipop", - showLink: true, - savedPosition: false, - rank: 3, - }, - children: [ - { - path: "/permission/page", - component: () => import("/@/views/permission/page.vue"), - name: "permissionPage", - meta: { - title: "message.permissionPage", - showLink: true, - savedPosition: false, - }, - }, - { - path: "/permission/button", - component: () => import("/@/views/permission/button.vue"), - name: "permissionButton", - meta: { - title: "message.permissionButton", - showLink: true, - savedPosition: false, - }, - }, - ], -}; - -export default permissionRouter; diff --git a/src/store/modules/permission.ts b/src/store/modules/permission.ts index d3b70a57f..9abaa6037 100644 --- a/src/store/modules/permission.ts +++ b/src/store/modules/permission.ts @@ -8,12 +8,28 @@ export const usePermissionStore = defineStore({ state: () => ({ constantRoutes: constantRoutesArr, //静态路由 wholeRoutes: [], + buttonAuth: [], }), actions: { asyncActionRoutes(routes) { + if (this.wholeRoutes.length > 0) return; this.wholeRoutes = ascending(this.constantRoutes.concat(routes)).filter( (v) => v.meta.showLink ); + + const getButtonAuth = (arrRoutes: Array) => { + if (!arrRoutes || !arrRoutes.length) return; + arrRoutes.forEach((v: any) => { + if (v.meta && v.meta.authority) { + this.buttonAuth.push(...v.meta.authority); + } + if (v.children) { + getButtonAuth(v.children); + } + }); + }; + + getButtonAuth(this.wholeRoutes); }, async changeSetting(routes) { await this.asyncActionRoutes(routes); diff --git a/src/views/permission/button.vue b/src/views/permission/button.vue deleted file mode 100644 index 36320aa6a..000000000 --- a/src/views/permission/button.vue +++ /dev/null @@ -1,15 +0,0 @@ - - - - - diff --git a/src/views/permission/button/index.vue b/src/views/permission/button/index.vue new file mode 100644 index 000000000..e5b9ae628 --- /dev/null +++ b/src/views/permission/button/index.vue @@ -0,0 +1,38 @@ + + + + + diff --git a/src/views/permission/page.vue b/src/views/permission/page/index.vue similarity index 93% rename from src/views/permission/page.vue rename to src/views/permission/page/index.vue index 88c244cbf..17d7292fc 100644 --- a/src/views/permission/page.vue +++ b/src/views/permission/page/index.vue @@ -27,7 +27,7 @@ export default { } else { storageSession.setItem("info", { username: "admin", - accessToken: "eyJhbGciOiJIUzUxMiJ9.test" + accessToken: "eyJhbGciOiJIUzUxMiJ9.admin" }); window.location.reload(); } @@ -40,6 +40,3 @@ export default { } }; - -