vue 项目 权限管理, 按钮及菜单
宏观了解权限
所谓权限,呈现给不同用户不同的视觉效果。举例: a,b,c三个用户登录进去,所呈现的菜单导航以及按钮不同。既然是在点击登录时触发。呢么就很简单,让后端去在登录接口里添加两个数组,导航数组,按钮数组。前段进行数据处理按钮呢通过js indexOf处理, 导航呢就要通过递归遍历再结合router的addRouter()来处理。
再啰嗦一下,权限这种东西呢,后端可以做方法如下:前段路由表结构发给后端,后端直接返回。你的侧导航直接拿数组进行遍历。一个字快,但是后端有可能不做。原因有2:第一懒更你bb。第二分配权限还有个后台格式不支持多层数组。(项目已成型不想改动)毕竟是单点登录吗不想改。
前段主导权限---菜单权限
1.路由配置表:
import Vue from "vue";import Router from "vue-router";import Login from "@/pages/login/login.vue"Vue.use(Router);//* 初始路由 */export default new Router({ routes: [ { path: '/', redirect: "/login", }, { path: "/login", component: Login } ]});/** * 动态路由 *///实例化vue的时候只挂载constantRouterexport default new Router({ routes: constantRouterMap});//异步挂载的路由//动态需要根据权限加载的路由表export const asyncRouterMap = [ { path: '/role', component: demo, name: '权限测试', meta: { role: ['admin','super_editor'] }, //页面需要的权限 },{ path : '*', redirect : '/404' }];在vuex中新建一个permission文件import Vue from 'vue'import App from './App'import router from './router'import { asyncRouterMap, constantRouterMap } from './router';import Vuex from "Vuex"import VueDND from 'awe-dnd'import BaiduMap from 'vue-baidu-map'Vue.use(Vuex)function hasPermission(roles, route) { if (route.meta && route.meta.role) { console.log(roles); return roles.some(role => route.meta.role.indexOf(role) >= 0) } else { return true }}const store = new Vuex.Store({ state: { count: 0, token:"asdsd", roles:"", routers:[], addRouters:[] }, getters:{ token(){ return "asdsd" }, roles(state ){ return state.roles }, addRouters(state){ return state.addRouters }, routers(state){ return state.routers } }, actions:{ GetInfo({state}){ return { data:{ role:state.roles=["admin"] } } }, GenerateRoutes({ commit }, data){ return new Promise(resolve => { const { roles } = data; console.log(asyncRouterMap,roles); const accessedRouters = asyncRouterMap.filter(v => { if (roles.indexOf('admin') >= 0) return true; if (hasPermission(roles, v)) { if (v.children && v.children.length > 0) { v.children = v.children.filter(child => { if (hasPermission(roles, child)) { return child } return false; }); return v } else { return v } } return false; }); console.log(accessedRouters); commit('SET_ROUTERS', accessedRouters); resolve(); }) } }, mutations: { SET_ROUTERS: (state, routers) => { console.log(routers); state.addRouters = routers; state.routers = constantRouterMap.concat(routers); } }});router.beforeEach((to, from, next) => { if (store.getters.token) { // 判断是否有token if (to.path === '/login') { next({ path: '/' }); } else { if (store.getters.roles.length === 0) { // 判断当前用户是否已拉取完user_info信息 store.dispatch('GetInfo').then(res => { // 拉取info const roles = res.data.role; store.dispatch('GenerateRoutes', { roles }).then(() => { // 生成可访问的路由表 console.log(store.getters.addRouters); router.addRoutes(store.getters.addRouters) // 动态添加可访问路由表 next({ ...to, replace: true }) // hack方法 确保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record }) }).catch(err => { console.log(err); }); } else { next() //当有用户权限的时候,说明所有可访问路由已生成 如访问没权限的全面会自动进入404页面 } } } else { next('/login'); // 否则全部重定向到登录页 }});//温馨提示,递归处理router递归元素一定按照自身的路由元信息,进行遍历。文档转载于:[菜单简易权限配置](https://blog.csdn.net/qq_41114603/article/details/88062457)//按钮权限假设登录返回了一个按钮权限listlet permissionBtnList = ['home:add','home:delete','home:edit'] //值由前段来写规范,模块名加上特殊符号拼接按钮名称//进行sessionStorage进行缓存不必vuex了.单点登录一版都是JWT验证登录sessionStorage.setItem('permissionBtnList ',JSON.stringfy(permissionBtnList ))// 在Utils文件中书写export getPermission function(str=null) {let permissionBtnList = JSON.parse(sessionStorage.getItem('permissionBtnList '))let flag = falseif (permissionBtnList.indexOf(str) !== -1) {flag = true}return flag}// 在组件中使用import {getPermission} from '@/util/index.js'<div v-if="getPermission('home:add')"></div>
其实权限很简单,主要是思路,相逢即是缘点个赞
作者:蜃楼_0bde
链接:https://www.jianshu.com/p/d7f1697c8193