前言

分享最近在学习VueRouter时配置动态路由和权限管理的一点小心得

一、VueRoute是什么？

vue-router是Vue官方推出的路由管理器，主要用于管理URL，实现URL和组件的对应，以及通过URL进行组件之间的切换，从而使构建单页面应用变得更加简单。这篇文章针对vue-router对应的工作原理进行详细讲解。

单页面应用( SPA)的核心思想之一，就是更新视图而不重新请求页面，简单来说，它在加载页面时，不会加载整个页面，只会更新某个指定的容器中的内容。对于大多数单页面应用，都推荐使用官方支持的 vue-route

二、先配置动态和静态路由

代码如下：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Layout from '@/views/layout/Layout'
import Login from '@/views/login/Login'import local from '@/utils/local';    // 自己写的存储方法Vue.use(VueRouter)        //使用路由// 静态路由
const routes = [// 登录{path: '/login',component: Login,hide: true    // 不是菜单},// 布局{path: '/',component: Layout,redirect: '/home',     //重定向meta: { title: '后台首页' },children: [{path: '/home',component: () => import('@/views/home/Home')}]},
]
// 公共路由添加
const router = new VueRouter({ routes })//动态路由
const dynamicRoutes = [// 订单管理{path: '/order',component: Layout,redirect: '/order/order-list',meta: { title: '订单管理', roles: '', icon: 'el-icon-document' },    children: [{path: '/order/order-list',meta: { title: '订单列表', roles: '' },component: () => import('@/views/order/OrderList')},{path: '/order/order-edit',meta: { title: '订单编辑', roles: 'super' },component: () => import('@/views/order/OrderEdit')},]},// 商品管理{path: '/goods',component: Layout,redirect: '/goods/goods-list',meta: { title: '商品管理', roles: '', icon: 'el-icon-s-shop' },children: [{path: '/goods/goods-list',meta: { title: '商品列表', roles:'super' },component: () => import('@/views/goods/GoodsList')},{path: '/goods/goods-cate',meta: { title: '商品分类', roles:'' },component: () => import('@/views/goods/GoodsCate')},{path: '/goods/goods-add',meta: { title: '商品添加', roles: '' },component: () => import('@/views/goods/GoodsAdd')},]},// 店铺管理{path: '/shop',component: Layout,redirect: '/shop',meta: { title: '店铺管理', roles: 'super', icon: 'el-icon-s-shop' },children: [{path: '',meta: { title: '店铺列表' },component: () => import('@/views/shop/Shop')}]},// 账号管理{path: '/account',component: Layout,redirect: '/account/account-list',meta: { title: '账号管理', roles: '', icon: 'el-icon-user' },children: [{path: '/account/account-list',meta: { title: '账号列表', roles: 'super' },component: () => import('@/views/account/AccountList')},{path: '/account/account-add',meta: { title: '账号添加', roles: 'super' },component: () => import('@/views/account/AccountAdd')},{path: '/account/modify-pwd',meta: { title: '修改密码', roles: '' },component: () => import('@/views/account/ModifyPassword')},{path: '/account/personal',meta: { title: '个人中心', roles: '' },component: () => import('@/views/account/Personal')},]},// 销售统计{path: '/total',component: Layout,redirect: '/total/goodstotal',meta: { title: '销售统计', roles: 'super', icon: 'iconfont icon-total' },children: [{ path: '/total/goodstotal', meta: { title: '商品统计' }, component: () => import('@/views/total/GoodsTotal') },{ path: '/total/ordertotal', meta: { title: '订单统计' }, component: () => import('@/views/total/OrderTotal') }]},// 给所有空白页配置路由{path: '*',meta: { roles: '' },hide: true,redirect: '/error404'    // 重定向},{path: '/error404',meta: { roles: '' },hide: true,component: () => import('@/views/error/error.vue')}
]export default router    // 默认导出

其中meta中的roles 是为了判断登录的人所拥有的权限而判断的我只是简单的判断了普通用户和超级管理员用户可以写成数组添加多个权限并且通过includes判断是否拥有访问该路由的权限

2.计算当前登录用户所拥有的权限可以访问的路由(权限控制)

代码如下:

// 计算路由
export function calcRoutes() {let rule = local.get('role')    // 从本地获取当前登录用户权限// local.get('role') 等同于 localStorage.getItem('role')if (!rule) {                // 如果没有获取到权限 则不计算路由渲染菜单return}let allRoutes = []    //计算合并后的路由let menu = []         // 存入本地的数组// 计算路由if (rule === 'super') {// 超级管理员router.addRoutes(dynamicRoutes)           // 可访问路由allRoutes = [...routes, ...dynamicRoutes]  // 计算后合并的路由// 计算菜单menu = allRoutes.filter(v => !v.hide)        // 需要显示出来的菜单} else {// 普通管理员可以访问的菜单和路由let arr = dynamicRoutes.filter(v => {         // 过滤一级路由 if (v.meta.roles.indexOf('super') === -1) {    // 如果找到了super 那么代表管理员才能访问 普通用户无法访问 if (v.meta.roles != 'super') {    // 如果没有super 证明普通用户可以访问if (v.children) {v.children = v.children.filter(c=>c.meta.roles !='super')}}  //过滤二级路由    若有子级则判断子级是否有super 有则不可访问该路由 反正可访问return true}else{return false}})router.addRoutes(arr)                    // 可访问路由allRoutes = [...routes, ...arr]        // 计算后合并的路由// 计算菜单menu = allRoutes.filter(v => !v.hide)    // 需要显示出来的菜单}// 存入本地local.set('menu', menu)
}
calcRoutes()    // 每次刷新页面重新计算路由

需要注意的是计算路由需要的权限在当前用户登录页面的时候就应该存入本地然后于index.js页面从本地获取当然也可以直接用query传值

由于vuerouter本身的BUG 所以需要在根页面的创建后周期里再次调用该函数以保证在登录之后才从本地取得权限
import {calcRoutes} from '@/router/index';export default {components: {LeftMenu,RightMain},created(){calcRoutes()}};

最终在根页面渲染菜单时即可根据权限实现动态渲染

总结

动态路由的配置其实就是把所有人都可以访问的公共路由设为静态路由把需要权限控制渲染的路由给一个标记通过筛选该标记来获取所有需要权限控制的路由最终计算该路由所需权限来实现菜单的渲染

VueRouter时配置动态路由和权限管理相关推荐

玩转华为数据中心交换机系列 | 配置动态路由接入M-LAG
素材来源:华为数据中心交换机配置指南一边学习一边整理试验笔记,并与大家分享,侵权即删,谢谢支持! 附上汇总贴:玩转华为数据中心交换机系列 | 汇总_COCOgsta的博客-CSDN博客组网需求如 ...
华为 eNSP 模拟器配置动态路由（ospf）
华为 eNSP 模拟器配置动态路由 (ospf) 文章目录一.实验步骤 1.配置主机 2.配置路由信息 3.相关命令 4.实验资料一.实验步骤配置两台主机的ip地址信息配置路由的ip信息启动 ...
计算机网络——配置动态路由实验
配置动态路由实验实验目的实验软件实验要求实验知识实验步骤实验结果实验目的掌握 RIP 协议配置. RIP 协议配置的命令为:router(config)#network <con ...
华为配置动态路由ISIS协议
华为配置动态路由ISIS协议一.路由基础知识二.路由器配置接口IP地址 (一)配置R1.R2.R3网络 (二)配置R1.R2.R3环回网络接口 (三)测试直连网络三.启动进程号,配置实体名称 ( ...
华为 eNSP 模拟器配置动态路由（RIP）
华为 eNSP 模拟器配置动态路由 RIP 文章目录一.实验步骤 1.配置主机 2.配置路由信息 3.配置路由(启动RIP协议) 4.测试 5.相关命令 6.实验资料一.实验步骤配置两台主机的i ...
Vue 动态路由和权限菜单的实现思路
为什么不贴代码详细说而是只讲思路呢--对,因为我懒--实际上动态菜单和动态路由的思路还是比较简单的,只是平日只在路由文件里配静态路由什么都不需要多考虑的,一上来可能会有点懵逼,当然这里边也多少有点小坑 ...
三个路由器配置动态路由
一.实验环境三个路由顺序直连: 二.需求描述采用动态路由的配置方式,实现动态学习路由: 三.实验步骤如所下所示 1．按题目画出拓扑图: 2．启动服务,配置交换机及路由器: *R1的配置* syss ...
Cisco配置动态路由
一.首先设置网络的拓扑图如下图所示路由器选择2811,线选择Serial DEC 和Copper cross-over IP后边的/24是子网掩码简写255.255.255.0 二.配置主机IP网 ...
微服务升级_SpringCloud Alibaba工作笔记0010---Gateway配置动态路由
技术交流QQ群[JAVA,C++,Python,.NET,BigData,AI]:170933152 上一节说的网关的两种配置方式中的第二种,通过代码配置路由现在来说通过网关gateway实现动态路 ...

VueRouter时配置动态路由和权限管理

文章目录

前言

一、VueRoute是什么？

二、先配置动态和静态路由

2.计算当前登录用户所拥有的权限可以访问的路由(权限控制)

总结

VueRouter时配置动态路由和权限管理相关推荐

最新文章

热门文章

VueRouter时配置动态路由和权限管理

文章目录

前言

一、VueRoute是什么？

二、 先配置动态和静态路由

2.计算当前登录用户所拥有的权限可以访问的路由(权限控制)

总结

VueRouter时配置动态路由和权限管理相关推荐

最新文章

热门文章

二、先配置动态和静态路由