?效果演示地址重要功能总结(store.getters.addRouters)动态添加可访问权限路由表，从而实现左侧和顶栏菜单的展示。及不同的角色都可以看到； 给其子菜单"页面权限",设置权限为：meta：{roles: ['admin']},及表示只有"admin"可以看到该菜单； 给其子菜单"按钮权限"设置权限为：meta：{roles: ['editor']},和router.afterEach()进行路由过滤和权限拦截；

// permission judge function
function hasPermission(roles, permissionRoles) {
 if (roles.indexOf('admin') >= 0) return true // admin permission passed directly
 if (!permissionRoles) return true
 return roles.some(role => permissionRoles.indexOf(role) >= 0)
}
const whiteList = ['/login'] // 不重定向白名单

router.beforeEach((to, from, next) => {
 NProgress.start()
 // 设置浏览器头部标题
 const browserHeaderTitle = to.meta.title
 store.commit('SET_BROWSERHEADERTITLE', {
 browserHeaderTitle: browserHeaderTitle
 })
 // 点击登录时，拿到了token并存入了vuex;
 if (getToken()) {
 /* has token*/
 if (store.getters.isLock && to.path !== '/lock') {
 next({
 path: '/lock'
 })
 NProgress.done()
 } else if (to.path === '/login') {
 next({ path: '/' }) // 会匹配到path:'',后面的path:'*'还没有生成;
 NProgress.done() 
 } else {
 if (store.getters.roles.length === 0) {
 store.dispatch('GetInfo').then(res => { // 拉取用户信息
  const roles = res.roles
  store.dispatch('GenerateRoutes', { roles }).then(() => { // 根据roles权限生成可访问的路由表
  router.addRoutes(store.getters.addRouters) // 动态添加可访问权限路由表
  next({ ...to, replace: true }) // hack方法 确保addRoutes已完成
  })
 }).catch((err) => {
  store.dispatch('FedLogOut').then(() => {
  Message.error(err || 'Verification failed, please login again')
  next({ path: '/' })
  })
 })
 } else {
 // 没有动态改变权限的需求可直接next() 删除下方权限判断 ↓
 if (hasPermission(store.getters.roles, to.meta.roles)) {
  next()//
 } else {
  next({ path: '/401', replace: true, query: { noGoBack: true }})
 }
 }
 }
 } else {
 if (whiteList.indexOf(to.path) !== -1) {
 next()
 } else {
 // 点击退出时,会定位到这里
 next('/login')
 NProgress.done()
 }
 }
})

router.afterEach(() => {
 NProgress.done() // 结束Progress
 setTimeout(() => {
 const browserHeaderTitle = store.getters.browserHeaderTitle
 setTitle(browserHeaderTitle)
 }, 0)
})
2.1、用户已经登录成功并返回token值；
牋牋牋 获取到roles信息后,将roles,name,avatar保存到vuex;

牋牋牋 同时,通过store.dispatch('GenerateRoutes', { roles })去重新过滤和生成路由，并将重新生成之后的权限路由'routes'保存到vuex;

牋牋牋 最后,通过router.addRoutes()合并路由表;牋 

牋牋牋 如果在获取用户信息接口时，出现错误，则调取store.dispatch('FedLogOut')接口，返回到login页面;

牋牋牋 用户FedLogOut之后，需要情况vuex和localStorage中的token信息;牋牋牋牋燑br>
牋牋牋 如果用户有该路由权限，直接跳转对应的页面；如果没有权限，则跳转至401提示页面;
3.1、NProgress.done() // 结束Progress

3.2、获取到title并设置title;src/permission.js4、权限演示说明
（2）. username: editor，password: 123456；editor只有被赋予权限的页面和按钮才可以看到；
2、定义顶栏路由数据router/topRouter.js；
export const topRouterMap = [
 {
 'parentName':'infoShow',
 'topmenulist':[
  {
  path: 'infoShow1',
  name: 'infoShow1',
  meta: {
   title: '个人信息子菜单1',
   icon: 'fa-asterisk',
   routerType: 'topmenu'
  },
  component: () => import('@/page/fundList/moneyData')
  }
 ]
 },
 {
 'parentName':'chinaTabsList',
 'topmenulist':[
  {
  path:'chinaTabsList1',
  name:'chinaTabsList1',
  meta:{
   title:'区域投资子菜单1',
   icon:'fa-asterisk',
   routerType:'topmenu'
  },
  component: () => import('@/page/fundList/moneyData')
  }
 ]
 }
]
3、 准备headNav.vue中渲染数据；
// 通过循环过滤，生成新的二级菜单
function addTopRouter(){
 asyncRouterMap.forEach( (item) => {
 if(item.children && item.children.length >= 1){
 item.children.forEach((sitem) => {
 topRouterMap.forEach((citem) => {
  if(sitem.name === citem.parentName){
  let newChildren = item.children.concat(citem.topmenulist);
  item.children = newChildren;
  }
 })
 })
 }
 })
 return asyncRouterMap;
}
 setLeftInnerMenu(){
 if(this.$route.meta.routerType == 'leftmenu'){ // 点击的为 左侧的2级菜单
 this.$store.dispatch(''ClickLeftInnerMenu,
  {'name':this.$route.name}
 );
 }else{ // 点击顶部的菜单
 this.$store.dispatch('ClickTopMenu',
  {'title':this.$route.meta.title}
 );
 }
}的值判断，用户是点击顶部菜单还是左侧菜单。如果点击顶部菜单，通过this.$store触发异步动作'ClickLeftInnerMenu'并传递参数'name',vuex中通过state.topRouters = filterTopRouters(state.routers,data)过滤当前路由信息；代码如下：
// 获取到当前路由对应顶部子菜单
 function filterTopRouters(data){
 let topRouters = topRouterMap.find((item)=>{
 return item.parentName === data.name
 })
 if(!mutils.isEmpty(topRouters)){
 return topRouters.topmenulist;
 }
}进行对应顶部路由数据的展示。用户每次点击左侧菜单时，顶部路由都进行了重新赋值并渲染，保证了数据的准确性。mock数据详解
Easy Mock介绍：
?Easy Mock 支持基于 Swagger 创建项目，以节省手动创建接口的时间；

?简单点说：Easy Mock就是一个在线创建mock的服务平台，帮你省去你 配置、安装、起服务、维护、多人协作Mock数据不互通等一系列繁琐的操作， 它能在不用1秒钟的时间内给你所要的一切。请参考详细文档
1.按照官方文档，创建个人项目vue-touzi-admin；
{
 code: function({
 _req
 }) {
 if (_req.body.username === "admin" || _req.body.username === "editor" && _req.body.password === "123456") {
 return 200
 } else {
 return -1
 }
 },
 message: function({
 _req
 }) {
 if (_req.body.username !== "admin" || _req.body.username !== "editor") {
 return "账号或密码有误！"
 }
 },
 data: function({
 _req
 }) {
 if (_req.body.username == "admin" && _req.body.password === "123456") {
 return {
 code: 0,
 roles: ['admin'],
 token: 'admin',
 introduction: '我是超级管理员',
 name: 'Super Admin'
 }
 } else if (_req.body.username === 'editor' && _req.body.password === "123456") {
 return {
 code: 0,
 roles: ['editor'],
 token: 'editor',
 introduction: '我是编辑',
 name: 'Normal Editor'
 }
 } else {
 return "账号或密码有误！"
 }
 }
}

module.exports = merge(prodEnv, {
 NODE_ENV: '"development"',
 API_BASE_URL: '"https://easy-mock.com/mock/5cd03667adb0973be6a3d8d1/api"',
})
import request from '@/utils/axios'
export function login(username, password) {
 return request({
 url: process.env.API_BASE_URL+'/user/login',
 method: 'post',
 data: {
 username,
 password
 }
 })
}mockjs使用
介绍及功能：Mock.js是一款模拟数据生成器，旨在帮助前端攻城师独立于后端进行开发，帮助编写单元测试。提供了以下模拟功能：
3.基于 HTML 模板生成模拟数据
mockjs/index.js，负责定义相关的mock接口，如下：
import Mock from 'mockjs'
import tableAPI from './money'
// 设置全局延时 没有延时的话有时候会检测不到数据变化 建议保留
Mock.setup({
 timeout: '300-600'
})
// 资金相关
Mock.mock(/\/money\/get/, 'get', tableAPI.getMoneyList)
Mock.mock(/\/money\/remove/, 'get', tableAPI.deleteMoney)
Mock.mock(/\/money\/batchremove/, 'get', tableAPI.batchremoveMoney)
Mock.mock(/\/money\/add/, 'get', tableAPI.createMoney)
Mock.mock(/\/money\/edit/, 'get', tableAPI.updateMoney)mockjs/money.js，则定义相关的函数，实现模拟数据的业务逻辑，比如资金流水数据的增删改查等；数据的生成规则请参照mockjs官网文档，上面有详细的语法说明；
src/api/money.js中，进行了统一的接口封装，在页面中调用对应函数，即可获取到相应的模拟数据。代码如下：
import request from '@/utils/axios'
export function getMoneyIncomePay(params) {
 return request({
 url: '/money/get',
 method: 'get',
 params: params
 })
}
export function addMoney(params) {
 return request({
 url: '/money/add',
 method: 'get',
 params: params
 })
}总结

以上所述是小编给大家介绍的vue实现后台管理权限系统及顶栏三级菜单显示功能,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对自学php网网站的支持！

如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！