From 25a3cb777e48c502f6500d7665f7592cabf200a2 Mon Sep 17 00:00:00 2001 From: lyt-Top <1105290566@qq.com> Date: Fri, 5 Feb 2021 01:15:37 +0800 Subject: [PATCH] =?UTF-8?q?'admin-21.01.05:=E6=96=B0=E5=A2=9E=E6=8C=89?= =?UTF-8?q?=E9=92=AE=E6=9D=83=E9=99=90=E6=8E=A7=E5=88=B6=E7=95=8C=E9=9D=A2?= =?UTF-8?q?=E5=8F=8A=E9=80=BB=E8=BE=91=E3=80=81=E5=A4=84=E7=90=86=E7=99=BB?= =?UTF-8?q?=E5=BD=95=E7=94=A8=E6=88=B7=E4=BF=A1=E6=81=AF=E7=AD=89'?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- vue-admin-wonderful-next/src/main.ts | 3 + vue-admin-wonderful-next/src/router/index.ts | 7 +- vue-admin-wonderful-next/src/store/index.ts | 21 +-- .../src/utils/authDirective.ts | 42 +++++ .../src/utils/authFunction.ts | 35 ++++ .../src/views/components/auth/auth.vue | 8 +- .../src/views/components/auth/authAll.vue | 21 ++- .../src/views/components/auth/auths.vue | 8 +- .../src/views/layout/routerView/parent.vue | 8 +- .../src/views/limits/frontEnd/btn/index.vue | 152 ++++++++++++++++-- .../src/views/limits/frontEnd/page/index.vue | 45 ++++-- .../src/views/login/component/account.vue | 27 +++- 12 files changed, 306 insertions(+), 71 deletions(-) create mode 100644 vue-admin-wonderful-next/src/utils/authDirective.ts create mode 100644 vue-admin-wonderful-next/src/utils/authFunction.ts diff --git a/vue-admin-wonderful-next/src/main.ts b/vue-admin-wonderful-next/src/main.ts index b292b34..3701c81 100644 --- a/vue-admin-wonderful-next/src/main.ts +++ b/vue-admin-wonderful-next/src/main.ts @@ -2,6 +2,7 @@ import { createApp } from 'vue' import App from './App.vue' import router from './router' import { store, key } from './store' +import { authDirective } from '/@/utils/authDirective.ts' import ElementPlus from 'element-plus' import 'element-plus/lib/theme-chalk/index.css' @@ -12,3 +13,5 @@ import mitt from "mitt" const app = createApp(App) app.use(router).use(store, key).use(ElementPlus, { locale: lang }).mount('#app') app.config.globalProperties.mittBus = mitt() + +authDirective(app) diff --git a/vue-admin-wonderful-next/src/router/index.ts b/vue-admin-wonderful-next/src/router/index.ts index 15bdfe0..0267011 100644 --- a/vue-admin-wonderful-next/src/router/index.ts +++ b/vue-admin-wonderful-next/src/router/index.ts @@ -517,14 +517,14 @@ export function formatTwoStageRoutes(arr: any) { // 缓存多级嵌套数组处理后的一维数组(tagsView、菜单搜索中使用：未过滤隐藏的(isHide)) export function setCacheTagsViewRoutes() { // 先处理有权限的路由，否则 tagsView、菜单搜索中无权限的路由也将显示 - let authsRoutes = setFilterMenuFun(dynamicRoutes, store.state.auths) + let authsRoutes = setFilterMenuFun(dynamicRoutes, store.state.userInfos.authPageList) // 添加到 vuex setTagsViewRoutes 中 store.dispatch('setTagsViewRoutes', formatTwoStageRoutes(formatFlatteningRoutes(authsRoutes))[0].children) } // 获取当前用户的权限去比对路由表，用于左侧菜单/横向菜单的显示 export function setFilterMenu() { - store.dispatch("setRoutes", setFilterMenuFun(dynamicRoutes[0].children, store.state.auths)) + store.dispatch("setRoutes", setFilterMenuFun(dynamicRoutes[0].children, store.state.userInfos.authPageList)) } // 判断路由 auth 中是否包含当前登录用户权限字段 @@ -551,7 +551,7 @@ export function setFilterRoute() { let filterRoute: any = [] formatTwoStageRoutes(formatFlatteningRoutes(dynamicRoutes))[0].children.map((route: any) => { route.meta.auth.map((metaAuth: any) => { - store.state.auths.map((auth: any) => { + store.state.userInfos.authPageList.map((auth: any) => { if (metaAuth === auth) filterRoute.push({ ...route }) }) }) @@ -585,7 +585,6 @@ export function resetRoute() { export function initAllFun() { const token = getSession('token') if (!token) return false - store.dispatch('setAuths') store.dispatch('setUserInfos') setAddRoute() // 添加动态路由 setFilterMenu() // 过滤权限菜单 diff --git a/vue-admin-wonderful-next/src/store/index.ts b/vue-admin-wonderful-next/src/store/index.ts index e387cc5..bc8c811 100644 --- a/vue-admin-wonderful-next/src/store/index.ts +++ b/vue-admin-wonderful-next/src/store/index.ts @@ -45,9 +45,8 @@ export interface RootStateTypes { layout: string }, routes: Array, - caches: Array, + keepAliveNames: Array, tagsViewRoutes: Array, - auths: Array, userInfos: object } @@ -57,9 +56,8 @@ export const store = createStore({ state: { themeConfig, routes: [], - caches: [], + keepAliveNames: [], tagsViewRoutes: [], - auths: [], userInfos: {} }, mutations: { @@ -73,16 +71,12 @@ export const store = createStore({ }, // 设置缓存（name字段） getCacheKeepAlive(state: any, data: Array) { - state.caches = data + state.keepAliveNames = data }, // 设置 TagsView 路由 getTagsViewRoutes(state: any, data: Array) { state.tagsViewRoutes = data }, - // 设置权限 - getAuths(state: any, data: Array) { - state.auths = data - }, // 设置用户信息 getUserInfos(state: any, data: object) { state.userInfos = data @@ -105,15 +99,6 @@ export const store = createStore({ async setTagsViewRoutes({ commit }, data: Array) { commit('getTagsViewRoutes', data) }, - // 设置权限 - async setAuths({ commit }, data: Array) { - // 模拟权限，实际项目中，请通过直接走接口获取权限标识 - if (data && data.length > 0) { - commit('getAuths', data) - } else { - if (getSession('userInfo')) commit('getAuths', getSession('userInfo').authList) - } - }, // 设置用户信息 async setUserInfos({ commit }, data: object) { if (data) { diff --git a/vue-admin-wonderful-next/src/utils/authDirective.ts b/vue-admin-wonderful-next/src/utils/authDirective.ts new file mode 100644 index 0000000..2c41928 --- /dev/null +++ b/vue-admin-wonderful-next/src/utils/authDirective.ts @@ -0,0 +1,42 @@ +import type { App } from 'vue' +import { store } from "/@/store/index.ts"; + +// 判断两数组是否相同 +export function judementSameArr(news: Array, old: Array) { + let count = 0 + const leng = old.length + for (let i in old) { + for (let j in news) { + if (old[i] === news[j]) count++ + } + } + return count === leng ? true : false +} + +export function authDirective(app: App) { + // 单个权限验证（v-auth="xxx"） + app.directive('auth', { + mounted(el, binding) { + if (!store.state.userInfos.authBtnList.some((v: any) => v === binding.value)) el.parentNode.removeChild(el) + } + }) + // 多个权限验证，满足一个则显示（v-auths="[xxx,xxx]"） + app.directive('auths', { + mounted(el, binding) { + let flag = false + store.state.userInfos.authBtnList.map((val: any) => { + binding.value.map((v: any) => { + if (val === v) flag = true + }) + }) + if (!flag) el.parentNode.removeChild(el) + } + }) + // 多个权限验证，全部满足则显示（v-auth-all="[xxx,xxx]"） + app.directive('auth-all', { + mounted(el, binding) { + const flag = judementSameArr(binding.value, store.state.userInfos.authBtnList) + if (!flag) el.parentNode.removeChild(el) + } + }) +} \ No newline at end of file diff --git a/vue-admin-wonderful-next/src/utils/authFunction.ts b/vue-admin-wonderful-next/src/utils/authFunction.ts new file mode 100644 index 0000000..99f3b41 --- /dev/null +++ b/vue-admin-wonderful-next/src/utils/authFunction.ts @@ -0,0 +1,35 @@ +import { store } from "/@/store/index.ts"; + +// 判断两数组是否相同 +export function judementSameArr(news: Array, old: Array) { + let count = 0 + const leng = old.length + for (let i in old) { + for (let j in news) { + if (old[i] === news[j]) count++ + } + } + return count === leng ? true : false +} + +// 单个权限验证 +export function auth(value: string) { + return store.state.userInfos.authBtnList.some((v: any) => v === value) +} + +// 多个权限验证，满足一个则为 true +export function auths(value: Array) { + let flag = false + store.state.userInfos.authBtnList.map((val: any) => { + value.map((v: any) => { + if (val === v) flag = true + }) + }) + return flag +} + +// 多个权限验证，全部满足则为 true +export function authAll(value: Array) { + return judementSameArr(value, store.state.userInfos.authBtnList) +} + diff --git a/vue-admin-wonderful-next/src/views/components/auth/auth.vue b/vue-admin-wonderful-next/src/views/components/auth/auth.vue index ab407a2..061636f 100644 --- a/vue-admin-wonderful-next/src/views/components/auth/auth.vue +++ b/vue-admin-wonderful-next/src/views/components/auth/auth.vue @@ -1,5 +1,5 @@ @@ -18,11 +18,11 @@ export default { setup(props) { const store = useStore(); // 获取 vuex 中的用户权限 - const getUserAuthList = computed(() => { - return store.state.auths.some((v) => v === props.value); + const getUserAuthBtnList = computed(() => { + return store.state.userInfos.authBtnList.some((v) => v === props.value); }); return { - getUserAuthList, + getUserAuthBtnList, }; }, }; diff --git a/vue-admin-wonderful-next/src/views/components/auth/authAll.vue b/vue-admin-wonderful-next/src/views/components/auth/authAll.vue index cf11de1..75ea808 100644 --- a/vue-admin-wonderful-next/src/views/components/auth/authAll.vue +++ b/vue-admin-wonderful-next/src/views/components/auth/authAll.vue @@ -1,6 +1,5 @@ @@ -18,13 +17,23 @@ export default { }, setup(props) { const store = useStore(); - console.log(store.state); + // 判断两数组是否相同 + const judementSameArr = (news, old) => { + let count = 0; + const leng = old.length; + for (let i in old) { + for (let j in news) { + if (old[i] === news[j]) count++; + } + } + return count === leng ? true : false; + }; // 获取 vuex 中的用户权限 - const getUserAuthList = computed(() => { - return false; + const getUserAuthBtnList = computed(() => { + return judementSameArr(props.value, store.state.userInfos.authBtnList); }); return { - getUserAuthList, + getUserAuthBtnList, }; }, }; diff --git a/vue-admin-wonderful-next/src/views/components/auth/auths.vue b/vue-admin-wonderful-next/src/views/components/auth/auths.vue index 876fabd..db80c65 100644 --- a/vue-admin-wonderful-next/src/views/components/auth/auths.vue +++ b/vue-admin-wonderful-next/src/views/components/auth/auths.vue @@ -1,5 +1,5 @@ @@ -18,9 +18,9 @@ export default { setup(props) { const store = useStore(); // 获取 vuex 中的用户权限 - const getUserAuthList = computed(() => { + const getUserAuthBtnList = computed(() => { let flag = false; - store.state.auths.map((val) => { + store.state.userInfos.authBtnList.map((val) => { props.value.map((v) => { if (val === v) flag = true; }); @@ -28,7 +28,7 @@ export default { return flag; }); return { - getUserAuthList, + getUserAuthBtnList, }; }, }; diff --git a/vue-admin-wonderful-next/src/views/layout/routerView/parent.vue b/vue-admin-wonderful-next/src/views/layout/routerView/parent.vue index 65185a6..f9e1f15 100644 --- a/vue-admin-wonderful-next/src/views/layout/routerView/parent.vue +++ b/vue-admin-wonderful-next/src/views/layout/routerView/parent.vue @@ -2,7 +2,7 @@
- + @@ -50,8 +50,8 @@ export default defineComponent({ return store.state.themeConfig; }); // 获取组件缓存列表(name值) - const getCaches = computed(() => { - return store.state.caches; + const getKeepAliveNames = computed(() => { + return store.state.keepAliveNames; }); // 页面加载前 onBeforeMount(() => { @@ -69,7 +69,7 @@ export default defineComponent({ }); return { getThemeConfig, - getCaches, + getKeepAliveNames, setTransitionName, ...toRefs(state), }; diff --git a/vue-admin-wonderful-next/src/views/limits/frontEnd/btn/index.vue b/vue-admin-wonderful-next/src/views/limits/frontEnd/btn/index.vue index 6d20641..1dad46e 100644 --- a/vue-admin-wonderful-next/src/views/limits/frontEnd/btn/index.vue +++ b/vue-admin-wonderful-next/src/views/limits/frontEnd/btn/index.vue @@ -1,6 +1,7 @@