hjq/PixelAI-admin
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

'admin-21.01.05:新增按钮权限控制界面及逻辑、处理登录用户信息等'

Browse Source
This commit is contained in:
lyt-Top 2021-02-05 01:15:37 +08:00
parent 097f87317f
commit 25a3cb777e
12 changed files with 306 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
vue-admin-wonderful-next/src/main.ts
View File

@ -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)

7
vue-admin-wonderful-next/src/router/index.ts
View File

@ -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() // 过滤权限菜单

21
vue-admin-wonderful-next/src/store/index.ts
View File

@ -45,9 +45,8 @@ export interface RootStateTypes {
layout: string
},
routes: Array<object>,
caches: Array<string>,
keepAliveNames: Array<string>,
tagsViewRoutes: Array<object>,
auths: Array<string>,
userInfos: object
}
@ -57,9 +56,8 @@ export const store = createStore<RootStateTypes>({
state: {
themeConfig,
routes: [],
caches: [],
keepAliveNames: [],
tagsViewRoutes: [],
auths: [],
userInfos: {}
},
mutations: {
@ -73,16 +71,12 @@ export const store = createStore<RootStateTypes>({
},
// 设置缓存（name字段）
getCacheKeepAlive(state: any, data: Array<string>) {
state.caches = data
state.keepAliveNames = data
},
// 设置 TagsView 路由
getTagsViewRoutes(state: any, data: Array<string>) {
state.tagsViewRoutes = data
},
// 设置权限
getAuths(state: any, data: Array<string>) {
state.auths = data
},
// 设置用户信息
getUserInfos(state: any, data: object) {
state.userInfos = data
@ -105,15 +99,6 @@ export const store = createStore<RootStateTypes>({
async setTagsViewRoutes({ commit }, data: Array<string>) {
commit('getTagsViewRoutes', data)
},
// 设置权限
async setAuths({ commit }, data: Array<string>) {
// 模拟权限，实际项目中，请通过直接走接口获取权限标识
if (data && data.length > 0) {
commit('getAuths', data)
} else {
if (getSession('userInfo')) commit('getAuths', getSession('userInfo').authList)
}
},
// 设置用户信息
async setUserInfos({ commit }, data: object) {
if (data) {

42
vue-admin-wonderful-next/src/utils/authDirective.ts Normal file
View File

@ -0,0 +1,42 @@
import type { App } from 'vue'
import { store } from "/@/store/index.ts";
// 判断两数组是否相同
export function judementSameArr(news: Array<string>, old: Array<string>) {
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)
}
})
}

35
vue-admin-wonderful-next/src/utils/authFunction.ts Normal file
View File

@ -0,0 +1,35 @@
import { store } from "/@/store/index.ts";
// 判断两数组是否相同
export function judementSameArr(news: Array<string>, old: Array<string>) {
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<string>) {
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<string>) {
return judementSameArr(value, store.state.userInfos.authBtnList)
}

8
vue-admin-wonderful-next/src/views/components/auth/auth.vue
View File

@ -1,5 +1,5 @@
<template>
<div v-if="getUserAuthList">
<div v-if="getUserAuthBtnList">
<slot />
</div>
</template>
@ -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,
};
},
};

21
vue-admin-wonderful-next/src/views/components/auth/authAll.vue
View File

@ -1,6 +1,5 @@
<template>
{{getUserAuthList}}
<div v-if="getUserAuthList">
<div v-if="getUserAuthBtnList">
<slot />
</div>
</template>
@ -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,
};
},
};

8
vue-admin-wonderful-next/src/views/components/auth/auths.vue
View File

@ -1,5 +1,5 @@
<template>
<div v-if="getUserAuthList">
<div v-if="getUserAuthBtnList">
<slot />
</div>
</template>
@ -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,
};
},
};

8
vue-admin-wonderful-next/src/views/layout/routerView/parent.vue
View File

@ -2,7 +2,7 @@
<div class="h100">
<router-view v-slot="{ Component }">
<transition :name="setTransitionName" mode="out-in">
<keep-alive :include="getCaches">
<keep-alive :include="getKeepAliveNames">
<component :is="Component" :key="refreshRouterViewKey" class="w100" />
</keep-alive>
</transition>
@ -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),
};

146
vue-admin-wonderful-next/src/views/limits/frontEnd/btn/index.vue
View File

@ -1,6 +1,7 @@
<template>
<div>
<LimitsFrontEndPage />
<!-- 演示1：组件方式 -->
<el-card shadow="hover" header="演示1：组件方式" class="mt15">
<el-row class="mb10" style="color:#808080;">单个权限验证（:value="xxx"）：</el-row>
<div class="flex-warp">
@ -36,7 +37,8 @@
</div>
</Auth>
</div>
<el-row class="mb10 mt10" style="color:#808080;">多个权限验证，有满足一个则显示（:value="[xxx,xxx]"）：</el-row>
<el-row class="mb10 mt10" style="color:#808080;">多个权限验证，满足一个则显示（:value="[xxx,xxx]"）：</el-row>
<div class="flex-warp">
<Auths :value="['btn.addsss','btn.edit','btn.delsss','btn.linksss']">
<div class="flex-warp-item">
@ -70,6 +72,7 @@
</div>
</Auths>
</div>
<el-row class="mb10 mt10" style="color:#808080;">多个权限验证，全部满足则显示（:value="[xxx,xxx]"）：</el-row>
<div class="flex-warp">
<AuthAll :value="['btn.add','btn.edit','btn.del','btn.link']">
@ -80,43 +83,174 @@
</div>
</div>
</AuthAll>
<AuthAll :value="['btn.add','btn.edit','btn.del','btn.link']">
<div class="flex-warp-item">
<div class="flex-warp-item-box">
<el-button type="info" size="small" icon="el-icon-edit-outline">编辑</el-button>
</div>
</div>
</AuthAll>
<AuthAll :value="['btn.add','btn.edit','btn.del','btn.link']">
<div class="flex-warp-item">
<div class="flex-warp-item-box">
<el-button type="danger" size="small" icon="el-icon-delete">删除
</el-button>
</div>
</div>
</AuthAll>
<AuthAll :value="['btn.add','btn.edit','btn.del','btn.link']">
<div class="flex-warp-item">
<div class="flex-warp-item-box">
<el-button type="success" size="small" icon="el-icon-link">跳转
</el-button>
</div>
</div>
</AuthAll>
</div>
</el-card>
<!-- 演示2：指令方式 -->
<el-card shadow="hover" header="演示2：指令方式（页面初始化时执行）" class="mt15">
<el-row class="mb10" style="color:#808080;">单个权限验证（v-auth="xxx"）：</el-row>
<div class="flex-warp">
<div class="flex-warp-item" v-auth="'btn.add'">
<div class="flex-warp-item-box">
<el-button type="primary" size="small" icon="el-icon-document-add">新增
</el-button>
</div>
</div>
<div class="flex-warp-item" v-auth="'btn.edit'">
<div class="flex-warp-item-box">
<el-button type="info" size="small" icon="el-icon-edit-outline">编辑</el-button>
</div>
</div>
<div class="flex-warp-item" v-auth="'btn.del'">
<div class="flex-warp-item-box">
<el-button type="danger" size="small" icon="el-icon-delete">删除
</el-button>
</div>
</div>
<div class="flex-warp-item" v-auth="'btn.link'">
<div class="flex-warp-item-box">
<el-button type="success" size="small" icon="el-icon-link">跳转
</el-button>
</div>
</div>
</div>
<el-row class="mb10 mt10" style="color:#808080;">多个权限验证，满足一个则显示（v-auths="[xxx,xxx]"）：</el-row>
<div class="flex-warp">
<div class="flex-warp-item" v-auths="['btn.addsss','btn.edit','btn.delsss','btn.linksss']">
<div class="flex-warp-item-box">
<el-button type="primary" size="small" icon="el-icon-document-add">新增
</el-button>
</div>
</div>
<div class="flex-warp-item" v-auths="['btn.add','btn.edit','btn.del','btn.link']">
<div class="flex-warp-item-box">
<el-button type="info" size="small" icon="el-icon-edit-outline">编辑</el-button>
</div>
</div>
<div class="flex-warp-item" v-auths="['btn.add','btn.edit','btn.del','btn.link']">
<div class="flex-warp-item-box">
<el-button type="danger" size="small" icon="el-icon-delete">删除
</el-button>
</div>
</div>
<div class="flex-warp-item" v-auths="['btn.add','btn.edit','btn.del','btn.link']">
<div class="flex-warp-item-box">
<el-button type="success" size="small" icon="el-icon-link">跳转
</el-button>
</div>
</div>
</div>
<el-row class="mb10 mt10" style="color:#808080;">多个权限验证，全部满足则显示（v-auth-all="[xxx,xxx]"）：</el-row>
<div class="flex-warp">
<div class="flex-warp-item" v-auth-all="['btn.add','btn.edit','btn.del','btn.link']">
<div class="flex-warp-item-box">
<el-button type="primary" size="small" icon="el-icon-document-add">新增
</el-button>
</div>
</div>
<div class="flex-warp-item" v-auth-all="['btn.add','btn.edit','btn.del','btn.link']">
<div class="flex-warp-item-box">
<el-button type="info" size="small" icon="el-icon-edit-outline">编辑</el-button>
</div>
</div>
<div class="flex-warp-item" v-auth-all="['btn.add','btn.edit','btn.del','btn.link']">
<div class="flex-warp-item-box">
<el-button type="danger" size="small" icon="el-icon-delete">删除
</el-button>
</div>
</div>
<div class="flex-warp-item" v-auth-all="['btn.add','btn.edit','btn.del','btn.link']">
<div class="flex-warp-item-box">
<el-button type="success" size="small" icon="el-icon-link">跳转
</el-button>
</div>
</div>
</div>
</el-card>
<!-- 演示3：函数方式 -->
<el-card shadow="hover" header="演示3：函数方式（点击按钮查看有无权限，用于判断）" class="mt15">
<el-row class="mb10" style="color:#808080;">auth('xxx')、auths(['xxx','xxx'])、authAll(['xxx','xxx'])：</el-row>
<div class="flex-warp">
<div class="flex-warp-item">
<div class="flex-warp-item-box">
<el-button type="primary" size="small" icon="el-icon-document-add" @click="onAuthClick">新增
</el-button>
</div>
</div>
<div class="flex-warp-item">
<div class="flex-warp-item-box">
<el-button type="info" size="small" icon="el-icon-edit-outline" @click="onAuthsClick">编辑</el-button>
</div>
</div>
<div class="flex-warp-item">
<div class="flex-warp-item-box">
<el-button type="danger" size="small" icon="el-icon-delete" @click="onAuthAllClick">删除
</el-button>
</div>
</div>
</div>
</el-card>
</div>
</template>
<script lang="ts">
import { toRefs, reactive } from "vue";
import { ElMessage } from "element-plus";
import LimitsFrontEndPage from "/@/views/limits/frontEnd/page/index.vue";
import Auth from "/@/views/components/auth/auth.vue";
import Auths from "/@/views/components/auth/auths.vue";
import AuthAll from "/@/views/components/auth/authAll.vue";
import { auth, auths, authAll } from "/@/utils/authFunction.ts";
export default {
name: "limitsFrontEndBtn",
components: { LimitsFrontEndPage, Auth, Auths, AuthAll },
setup() {
const state = reactive({
val: "",
});
// 单个权限验证
const onAuthClick = () => {
if (!auth("btn.add")) ElMessage.error("抱歉，您没有权限！");
else ElMessage.success("恭喜，您有权限！");
};
// 多个权限验证，满足一个则为 true
const onAuthsClick = () => {
if (!auths(["btn.add", "btn.edit", "btn.del", "btn.link"]))
ElMessage.error("抱歉，您没有权限！");
else ElMessage.success("恭喜，您有权限！");
};
// 多个权限验证，全部满足则为 true
const onAuthAllClick = () => {
if (!authAll(["btn.add", "btn.edit", "btn.del", "btn.link"]))
ElMessage.error("抱歉，您没有权限！");
else ElMessage.success("恭喜，您有权限！");
};
return {
...toRefs(state),
onAuthClick,
onAuthsClick,
onAuthAllClick,
};
},
};

45
vue-admin-wonderful-next/src/views/limits/frontEnd/page/index.vue
View File

@ -1,9 +1,11 @@
<template>
<div>
<el-alert title="温馨提示：此权限页面代码及效果只作为演示使用，若出现不可逆转的bug，请尝试 `F5` 刷新页面。若实际项目中非要实现此用户权限切换功能，
请在切换方法 `onRadioChange` 最后面添加刷新代码 `window.location.reload()`。" type="warning" :closable="false"></el-alert>
<el-alert :title="`当前用户权限：[${getAuthList}]`" type="success" :closable="false" class="mt15"></el-alert>
<el-card shadow="hover" header="切换用户演示，前端控制不同用户显示不同页面权限" class="mt15">
请在切换方法 `onRadioChange` 最后面添加刷新代码 `window.location.reload()`。 请注意：按钮权限页面中的演示2（指令模式）、演示3（函数模式）
切换用户时无法动态演示，想要动态演示，请按 `F5` 或者添加 `window.location.reload()`。" type="warning" :closable="false"></el-alert>
<el-alert :title="`当前用户页面权限：[${getAuthPageList}]，当前用户按钮权限：[${getAuthBtnList}]`" type="success" :closable="false"
class="mt15"></el-alert>
<el-card shadow="hover" header="切换用户演示，前端控制不同用户显示不同页面、按钮权限" class="mt15">
<el-radio-group v-model="userAuth" size="small" @change="onRadioChange">
<el-radio-button label="admin"></el-radio-button>
<el-radio-button label="test"></el-radio-button>
@ -32,13 +34,17 @@ export default {
val: "",
userAuth: "",
});
// 获取用户权限信息
const getAuthList = computed(() => {
return store.state.auths;
// 获取用户页面权限信息
const getAuthPageList = computed(() => {
return store.state.userInfos.authPageList;
});
// 获取用户按钮权限信息
const getAuthBtnList = computed(() => {
return store.state.userInfos.authBtnList;
});
// 初始化用户权限
const initUserAuth = () => {
state.userAuth = store.state.auths[0];
state.userAuth = store.state.userInfos.authPageList[0];
};
// 重新执行添加动态路由、过滤权限菜单、缓存等方法
const initAllFun = () => {
@ -50,16 +56,27 @@ export default {
const onRadioChange = () => {
resetRoute();
let defaultAuthPageList: Array<string> = [];
let adminAuthList: Array<string> = [
"admin",
let defaultAuthBtnList: Array<string> = [];
// admin 页面权限标识，对应路由 meta.auth
let adminAuthPageList: Array<string> = ["admin"];
// admin 按钮权限标识
let adminAuthBtnList: Array<string> = [
"btn.add",
"btn.del",
"btn.edit",
"btn.link",
];
let testAuthList: Array<string> = ["test", "btn.add", "btn.link"];
if (state.userAuth === "admin") defaultAuthPageList = adminAuthList;
else defaultAuthPageList = testAuthList;
// test 页面权限标识，对应路由 meta.auth
let testAuthPageList: Array<string> = ["test"];
// test 按钮权限标识
let testAuthBtnList: Array<string> = ["btn.add", "btn.link"];
if (state.userAuth === "admin") {
defaultAuthPageList = adminAuthPageList;
defaultAuthBtnList = adminAuthBtnList;
} else {
defaultAuthPageList = testAuthPageList;
defaultAuthBtnList = testAuthBtnList;
}
const userInfos = {
userName: state.userAuth,
photo:
@ -71,7 +88,6 @@ export default {
authBtnList: defaultAuthBtnList,
};
setSession("userInfo", userInfos);
// store.dispatch("setAuths", defaultAuthPageList); // 请注意执行顺序(存储用户权限到vuex)
store.dispatch("setUserInfos", userInfos); // 请注意执行顺序(存储用户信息vuex)
initAllFun(); // 请注意执行顺序
};
@ -80,7 +96,8 @@ export default {
initUserAuth();
});
return {
getAuthList,
getAuthPageList,
getAuthBtnList,
onRadioChange,
...toRefs(state),
};

27
vue-admin-wonderful-next/src/views/login/component/account.vue
View File

@ -68,17 +68,28 @@ export default defineComponent({
// 登录
const onSignIn = () => {
let currentTimeInfo = currentTime.value;
let defaultAuthList: Array<string> = [];
let adminAuthList: Array<string> = [
"admin",
let defaultAuthPageList: Array<string> = [];
let defaultAuthBtnList: Array<string> = [];
// admin 页面权限标识，对应路由 meta.auth
let adminAuthPageList: Array<string> = ["admin"];
// admin 按钮权限标识
let adminAuthBtnList: Array<string> = [
"btn.add",
"btn.del",
"btn.edit",
"btn.link",
];
let testAuthList: Array<string> = ["test", "btn.add", "btn.link"];
if (state.ruleForm.userName === "admin") defaultAuthList = adminAuthList;
else defaultAuthList = testAuthList;
// test 页面权限标识，对应路由 meta.auth
let testAuthPageList: Array<string> = ["test"];
// test 按钮权限标识
let testAuthBtnList: Array<string> = ["btn.add", "btn.link"];
if (state.ruleForm.userName === "admin") {
defaultAuthPageList = adminAuthPageList;
defaultAuthBtnList = adminAuthBtnList;
} else {
defaultAuthPageList = testAuthPageList;
defaultAuthBtnList = testAuthBtnList;
}
const userInfos = {
userName: state.ruleForm.userName,
photo:
@ -86,11 +97,11 @@ export default defineComponent({
? "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1813762643,1914315241&fm=26&gp=0.jpg"
: "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=317673774,2961727727&fm=26&gp=0.jpg",
time: new Date().getTime(),
authList: defaultAuthList,
authPageList: defaultAuthPageList,
authBtnList: defaultAuthBtnList,
};
setSession("token", Math.random().toString(36).substr(0));
setSession("userInfo", userInfos);
store.dispatch("setAuths", defaultAuthList); // 请注意执行顺序(存储用户权限到vuex)
store.dispatch("setUserInfos", userInfos); // 请注意执行顺序(存储用户信息vuex)
initAllFun(); // 请注意执行顺序
router.push("/");