关于Vue的路由权限管理的示例代码

前言

曾经在工作上对 vue 路由权限管理这方面有过研究，这几天又看到了几篇相关的文章，再加上昨天电面中又再一次提及到，就索性整理了一下自己的一些看法，希望对大家有帮助。

实现

大体上实现的思路很简单，先上图：

无非是将路由配置按用户类型分割为 用户路由 和 基本路由，不同的用户类型可能存在不同的 用户路由，具体依赖实际业务。

  1. 用户路由: 当前用户所特有的路由
  2. 基本路由：所有用户均可以访问的路由

实现控制的方式分两种：

通过vue-router addRoutes方法注入路由实现控制
通过vue-router beforeEach钩子限制路由跳转

addRoutes 方式：

通过请求服务端获取当前用户路由配置，编码为 vue-router 所支持的基本格式（具体如何编码取决于前后端协商好的数据格式），通过调用 this.$router.addRoutes 方法将编码好的用户路由注入到现有的 vue-router 实例中去，以实现用户路由。

beforeEach 方式

通过请求服务端获取当前用户路由配置，通过注册 router.beforeEach 钩子对路由的每次跳转进行管理，每次跳转都进行检查，如果目标路由不存再于 基本路由 和 当前用户的 用户路由 中，取消跳转，转为跳转错误页。

以上两种方式均需要在 vue-router 中配置错误页，以保证用户感知权限不足。

两种方式的原理其实都是一样的，只不过 addRoutes 方式 通过注入路由配置告诉 vue-router ：“当前我们就只有这些路由，其它路由地址我们一概不认”，而 beforeEach 则更多的是依赖我们手动去帮 vue-router 辨别什么页面可以去，什么页面不可以去。说白了也就是 自动 与 手动 的差别。说到这，估计大家都会觉得既然是 自动 的，那肯定是 addRoutes 最方便快捷了，还能简化业务代码，笔者一开始也是这么认为的，但是！很多人都忽略了一点：

addRoutes 方法仅仅是帮你注入新的路由，并没有帮你剔除其它路由！

设想存在这么一种情况：用户在自己电脑上登录了管理员账号，这个时候会向路由中注入管理员的路由，然后再退出登录，保持页面不刷新，改用普通用户账号进行登录，这个时候又会向路由中注入普通用户的路由，那么，在路由中将存在两种用户类型的路由，即使用户不感知，通过改变 url，普通用户也可以访问管理员的页面！

对于这个问题，也有一个解决办法：

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
const createRouter = () => new Router({
 mode: 'history',
 routes: []
})
const router = createRouter()
export function resetRouter () {
 const newRouter = createRouter()
 router.matcher = newRouter.matcher
}
export default router

通过新建一个全新的 Router，然后将新的 Router.matcher 赋给当前页面的管理 Router，以达到更新路由配置的目的。

笔者做了一个小demo，大家可以去体验一下。

关于上述问题，在vue-router的 github issues 下有过讨论，分别是：

Add option to Reset/Delete Routes #1436

Feature request: replace routes dynamically #1234

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

您可能感兴趣的文章:

  • vue vuex vue-rouert后台项目——权限路由（适合初学）
  • vue-router路由懒加载和权限控制详解
赞 (0)

相关推荐

  • vue-router路由懒加载和权限控制详解

    vue-router路由懒加载 和权限控制,今天刚好搞了一个基于node token验证的小demo 所以下面介绍下,路由懒加载 1.为什么要使用路由懒加载呢 用vue.js写单页面应用时,会出现打包后的JavaScript包非常大,影响页面加载,我们可以利用路由的懒加载去优化这个问题,当我们用到某个路由后,才去加载对应的组件,这样就会更加高效 2.用法 import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) e

  • vue vuex vue-rouert后台项目——权限路由（适合初学）

    vue vuex vue-rouert后台项目——权限路由（适合初学）

    项目地址: vue-simple-template 共三个角色:adan barbara carrie 密码全是:123456 adan 拥有 最高权限A 他可以看到 red , yellow 和 blue 页面(共三个页面) barbara 拥有 权限B 他可以看到 red 和 yellow 页面 carrie 拥有 权限C 他可以看到 red 和 blue 页面 技术栈 webpack ---- 打包神器 vue ---- JavaScript 框架 vuex ---- 实现不同组件间的状态

  • 关于Vue的路由权限管理的示例代码

    关于Vue的路由权限管理的示例代码

    前言 曾经在工作上对 vue 路由权限管理这方面有过研究,这几天又看到了几篇相关的文章,再加上昨天电面中又再一次提及到,就索性整理了一下自己的一些看法,希望对大家有帮助. 实现 大体上实现的思路很简单,先上图: 无非是将路由配置按用户类型分割为 用户路由 和 基本路由,不同的用户类型可能存在不同的 用户路由,具体依赖实际业务. 用户路由: 当前用户所特有的路由 基本路由:所有用户均可以访问的路由 实现控制的方式分两种: 通过vue-router addRoutes方法注入路由实现控制 通过vue

  • vue实现菜单权限控制的示例代码

    vue实现菜单权限控制的示例代码

    大家在做后台管理系统时一般都会涉及到菜单的权限控制问题.当然解决问题的方法无非两种--前端控制和后端控制.我们公司这边的产品迭代速度较快,所以我们是从前端控制路由迭代到后端控制路由.下面我会分别介绍这两种方法的优缺点以及如何实现(不熟悉vue-router API的同学可以先去官网看一波API哈). 我先简单说下项目的需求:如下图所示,有一级菜单和二级菜单,然后不同的人登录进去会展示不同的菜单. 前端控制路由的思路:将所有的路由映射表都拿到前端来维护,就是我的router.js里面将所有的菜单p

  • SpringBoot中整合Shiro实现权限管理的示例代码

    之前在 SSM 项目中使用过 shiro,发现 shiro 的权限管理做的真不错,但是在 SSM 项目中的配置太繁杂了,于是这次在 SpringBoot 中使用了 shiro,下面一起看看吧 一.简介 Apache Shiro是一个强大且易用的Java安全框架,执行身份验证.授权.密码和会话管理.使用Shiro的易于理解的API,您可以快速.轻松地获得任何应用程序,从最小的移动应用程序到最大的网络和企业应用程序. 三个核心组件: 1.Subject 即"当前操作用户".但是,在 Shi

  • Vue 实现前端权限控制的示例代码

    Vue 实现前端权限控制的示例代码

    登录&&权限流程图 前言 首先我们确定的权限控制分为三大部分,其中根据粒度大小分的更细: 登录权限控制 页面权限控制 菜单中的页面是否可以被访问 页面中的按钮 (增.删.改.查)的权限控制是否显示 接口权限控制 一.登录权限控制 登录访问权限控制是对用户的校验.在用户登录成功之后,后台将返回一个token,之后前端每次进行接口请求的时候,都要带上这个token.后台拿到这个token后进行判断,如果此token确实存在并且没有过期,则可以通过访问.如果token不存在或后台判断已过期,则会

  • php实现简单的权限管理的示例代码

    php实现简单的权限管理的示例代码

    今天主要来实现一个权限管理系统,它主要是为了给不同的用户设定不同的权限,从而实现不同权限的用户登录之后使用的功能不一样,首先先看下数据库 总共有5张表,qx_user,qx_rules和qx_juese 3张表与另外2张表形成"w"型的关系,也是比较常见的一种权限数据库的方式,首先先做权限的设定,也就是管理层给不同用户设定不同权限. guanli.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional/

  • Springboot+Vue+shiro实现前后端分离、权限控制的示例代码

    本文总结自实习中对项目的重构.原先项目采用Springboot+freemarker模版,开发过程中觉得前端逻辑写的实在恶心,后端Controller层还必须返回Freemarker模版的ModelAndView,逐渐有了前后端分离的想法,由于之前,没有接触过,主要参考的还是网上的一些博客教程等,初步完成了前后端分离,在此记录以备查阅. 一.前后端分离思想 前端从后端剥离,形成一个前端工程,前端只利用Json来和后端进行交互,后端不返回页面,只返回Json数据.前后端之间完全通过public A

  • vue2/vue3路由权限管理的方法实例

    1. Vue 路由权限控制一般有2种方法 a.路由元信息(meta) b.动态加载菜单和路由(addRoutes) 2 路由元信息(meta)来进行路由权限控制 2.1 在vue2种的实现 如果一个网站有不同的角色,比如 管理员 和 普通用户 ,要求不同的角色能访问的页面是不一样的 这个时候我们就可以 把所有的页面都放在路由表里 ,只要 在访问的时候判断一下角色权限 .如果有权限就让访问,没有权限的话就拒绝访问,跳转到404页面 vue-router 在构建路由时提供了元信息 meta 配置接口

  • 深入解析vue中的权限管理

    深入解析vue中的权限管理

    目录 vue要做权限管理该怎么做? 一.是什么 二.如何做 接口权限 路由权限控制 菜单权限 方案一 方案二 按钮权限 方案一 方案二 小结 vue要做权限管理该怎么做? 一.是什么 权限是对特定资源的访问许可,所谓权限控制,也就是确保用户只能访问到被分配的资源 而前端权限归根结底是请求的发起权,请求的发起可能有下面两种形式触发 页面加载触发 页面上的按钮点击触发 总的来说,所有的请求发起都触发自前端路由或视图 所以我们可以从这两方面入手,对触发权限的源头进行控制,最终要实现的目标是: 路由方面

  • PHP实现权限管理功能示例

    PHP实现权限管理功能示例

    权限管理系统,它主要是为了给不同的用户设定不同的权限,从而实现不同权限的用户登录之后使用的功能不一样. 首先先看下数据库 总共有5张表,users,roles和roleswork 3张表与另外2张表形成"w"型的关系,也是比较常见的一种权限数据库的方式,首先先做权限的设定,也就是管理层给不同用户设定不同权限. 1.管理员页面RBAC.php <!DOCTYPE html> <html> <head> <meta charset="UT

  • Vue element实现权限管理业务流程详解

    Vue element实现权限管理业务流程详解

    目录 展开渲染标签编辑权限 对话框内树形组件编辑权限 展示所有权限 添加 编辑 删除 角色 都与上一篇 用户类似 只是接口不同 我们只关注其他不一样的: 展开渲染标签编辑权限 el-table-column type="expand"设置了expand则显示为一个可展开的按钮 显示图上的效果 使用了 三重for循环 按照 tree 数据结构 .children 取得下一级数据 <el-table-column type="expand"> <tem

随机推荐