这篇文章主要介绍“vue2模拟vue-element-admin手写角色权限怎么实现”，在日常操作中，相信很多人在vue2模拟vue-element-admin手写角色权限怎么实现问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”vue2模拟vue-element-admin手写角色权限怎么实现”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
权限
路由权限
静态路由：固定的路由，没有权限。如login页面
动态路由：根据不同的角色，后端返回不同的路由接口。通过meta中的roles去做筛选
store存储路由
//地址：store/modules/permissionimport { routes as constantRoutes } from '@/router'// 根据meta.roles去判断该角色是否有路由权限function hasPermission(roles, route) { if (route.meta && route.meta.roles) { return route.meta.roles.some(val => val === roles) } return true}export function filterAsyncRoutes(routes, roles) { const res = [] routes.forEach(route => { const tmp = { ...route } if (hasPermission(roles, tmp)) { if (tmp.children) { //后台传来的路由字符串，转换为组件对象 // let a = `../views/${route.component}`; // route.component = () => import(a); // 导入组件 tmp.children = filterAsyncRoutes(tmp.children, roles) } res.push(tmp) } }) return res}//模拟后端传过来的路由export const asyncRoutes = [ { path: '/', name: 'home', redirect: '/PickupTask', meta: { title: '首页', //纯前端去做动态路由 roles: ['admin'] }, component: () => import('@/views/HomeView.vue'), children: [ { path: 'PickupTask', name: 'PickupTask', meta: { title: 'PickupTask', }, component: () => import('@/views/Sd/PickupTask.vue'), }, { path: 'access', hidden: true, component: () => import('@/views/demo/Access.vue'), meta: { title: 'access', roles: ['admin'], //按钮权限标识 button: { 'btn:access:createUser': 'hidden', 'btn:access:editUser': 'disable' }, }, }, ], }]const permisssion = { // namespaced: true, -> store.dispatch('permisssion/generateRoutes', 'admin'); state: { //静态路由+动态路由 routes: [], //动态路由 addRoutes: [] }, mutations: { SET_ROUTES: (state, routes) => { state.addRoutes = routes state.routes = constantRoutes.concat(routes) } }, actions: { generateRoutes({ commit }, roles) { return new Promise(resolve => { let accessedRoutes = filterAsyncRoutes(asyncRoutes, roles) commit('SET_ROUTES', accessedRoutes) resolve(accessedRoutes) }) } }}export default permisssionrouter添加路由
将store中的动态路由使用addRoute添加(最新版本去掉了addRoutes只能使用addRoute添加路由)。
//地址：router/indeximport Vue from 'vue';import VueRouter, { RouteConfig } from 'vue-router';import store from '@/store';Vue.use(VueRouter);const isProd = process.env.NODE_ENV === 'production';const routerContext = require.context('./', true, /index.js$/);//静态路由export let routes: any = [];routerContext.keys().forEach((route) => { // route就是路径 // 如果是根目录的index不做处理 if (route.startsWith('./index')) { return; } const routerModule = routerContext(route); routes = [...routes, ...(routerModule.default || routerModule)];});// 创建 router 实例，然后传 `routes` 配置const router = new VueRouter({ mode: 'history', base: isProd ? '/vue-demo/' : process.env.BASE_URL, routes, scrollBehavior(to, from, savedPosition) { if (to.hash) { return { selector: to.hash, }; } },});let registerRouteFresh = true;router.beforeEach(async (to: any, from, next) => { //设置当前页的title document.title = to.meta.title; if (to.path === '/login' && localStorage.getItem('token')) { next('/'); } console.log(registerRouteFresh); //如果首次或者刷新界面，next(...to, replace: true)会循环遍历路由， //如果to找不到对应的路由那么他会再执行一次beforeEach((to, from, next))直到找到对应的路由， //我们的问题在于页面刷新以后异步获取数据，直接执行next()感觉路由添加了但是在next()之后执行的， //所以我们没法导航到相应的界面。这里使用变量registerRouteFresh变量做记录，直到找到相应的路由以后，把值设置为false然后走else执行next(),整个流程就走完了，路由也就添加完了。 if (registerRouteFresh) { //设置路由 const accessRoutes = await store.dispatch('generateRoutes', 'admin'); let errorPage = { path: '*', name: '404', component: () => import('../views/404.vue'), }; // 将404添加进去 // 现在才添加的原因是：作为一级路由，当刷新，动态路由还未加载，路由就已经做了匹配，找不到就跳到了404 router.addRoute({ ...errorPage }); accessRoutes.forEach((item: RouteConfig) => { router.addRoute(item); }); //获取路由配置 console.log(router.getRoutes()); //通过next({...to, replace})解决刷新后路由失效的问题 next({ ...to, replace: true }); registerRouteFresh = false; } else { next(); } next();});export default router;菜单权限
路由遍历，通过store路由权限中的permission.state.routes去做处理
按钮权限
准备：存储按钮标识
//地址：store/modules/userimport { userInfo,} from '@/api'const user = { state: { role: 'admin', mockButton: { 'btn:access:createUser': 'show', 'btn:access:editUser': 'show' } }, //更改 Vuex 的 store 中的状态的唯一方法是提交 mutation mutations: { change_role: (state, data) => { state.role = data.role }, change_btn: (state, data) => { state.mockButton = data.mockButton } },}export default user指令
通过模拟传入按钮标识的属性，去判断按钮是否隐藏或者禁用
//地址：directive/permission/indeximport permission from './permissionBtn'const install = function(Vue) { Vue.directive('permission', permission)}if (window.Vue) { window['permission'] = permission Vue.use(install); // eslint-disable-line}permission.install = installexport default permission//地址：directive/permission/permissionBtnimport store from '@/store'function checkPermission(el, binding) { const { value } = binding const roles = store.getters && store.getters.role // 获取模拟权限按钮标识 const mockButton = store.getters && store.getters.mockButton // 设置按钮属性 if (mockButton[value] === 'disabled') { el.disabled = true el.setAttribute('disabled', true) } if (mockButton[value] === 'hidden') { el.style.display = 'none' } if (mockButton[value] === 'show') { el.style.display = 'block' el.disabled = false } // throw new Error(`need roles! Like v-permission="['admin','editor']"`)}export default { inserted(el, binding) { checkPermission(el, binding) }, update(el, binding) { checkPermission(el, binding) }}//应用
<template> <div> <a-button @click="changeRole">切换角色</a-button> <span>当前角色：{{ role }}</span> <!-- 注意一定要加disabled属性，才能设置它的disabled值 --> <a-button :disabled="false" v-permission="'btn:access:createUser'"> 新建用户 </a-button> <a-button :disabled="false" v-permission="'btn:access:editUser'"> 编辑用户 </a-button> </div></template><script lang='ts'>import { Vue, Component, Watch } from "vue-property-decorator";import permission from "@/directive/permission/index.js"; // 权限判断指令// import checkPermission from '@/utils/permission' // 权限判断函数@Component({ directives: { permission, }, computed: { role() { return this.$store.getters.role; }, },})export default class Access extends Vue { get role() { return this.$store.getters.role; } changeRole() { //设置按钮权限 this.$store.commit("change_btn", { mockButton: this.role === "admin" ? { "btn:access:createUser": "hidden", "btn:access:editUser": "disabled", } : { "btn:access:createUser": "show", "btn:access:editUser": "show", }, }); //设置角色 this.$store.commit("change_role", { role: this.role === "admin" ? "edit" : "admin", }); }}</script>函数
export default function checkPermission(value) { if (value && value instanceof Array && value.length > 0) { const roles = store.getters && store.getters.roles const permissionRoles = value const hasPermission = roles.some(role => { return permissionRoles.includes(role) }) return hasPermission } console.error(`need roles! Like v-permission="['admin','editor']"`) return false}<template> <div> <a-button v-if="hasPerms('btn:access:createUser')" :disable="hasPerms('btn:access:createUser')" > 新建用户 </a-button> <a-button v-if="hasPerms('btn:access:editUser')" :disable="hasPerms('btn:access:editUser')" > 编辑用户 </a-button> </div></template><script lang='ts'>import { Vue, Component, Watch } from "vue-property-decorator";import checkPermission from "@/utils/permission"; // 权限判断函数@Componentexport default class Access extends Vue { hasPerms(params) { return checkPermission(params); }}</script>到此，关于“vue2模拟vue-element-admin手写角色权限怎么实现”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注编程网网站，小编会继续努力为大家带来更多实用的文章！
