vue-router权限控制(简单方式)

在vue-router控制前端权限是常见需求：

  1. 有一种做法是直接在后端完成判断，提供页面列表和操作列表，在前端进行渲染，但这个方案并不优雅，前后端耦合度比较高。
  2. 比较常见的做法是把登录页面独立在router之外，专门写一个权限控制文件，在登录之后根据用户权限加载router，之后把权限作为参数传入各种组件中，以控制元素的渲染。这个方法比较合理，没有什么额外的开销，只是需要独立写一个登录页面和权限控制文件比较麻烦一些，特别是对一些小项目而言。

我们希望还有更简单的方式。这个时候梳理一下需求，我们的主要目标是：

  1. 菜单栏控制，根据权限渲染可以进入的页面菜单；
  2. 操作按钮权限控制，没有操作权限的不予显示；
  3. 如果有人通过直接点击链接或输入地址进入没有权限的页面，则进行拦截；

第一、第二个目标是容易实现的，把权限列表传入对应组件，通过v-if判断即可，需要解决的是越权页面的拦截问题。在上面常见的做法中，为了实现拦截，单独写了一个登录页面，登录之后再根据权限加载路由，这样，没有权限的路由根本不会加载，于是被导向404页面。

那么，现在的问题是，怎么样会有更简单的方式？

显然，如果我们不想单独写login页面，那么router在登录前就完成加载了。如果无法通过router自动将越权页面导向404页面，我们能做的，只能手动引导了。思路清楚了，实现起来就毫无压力：

根据vue组件的生命周期，我们可以在mounted钩子上进行权限判断，如果通过props传入的用户权限列表没有对应权限，就跳转页面到404：

mounted () {
     if (!this.check_user_privilege (current_page)) {
       this.$Message.error('权限不足');
       this.$router.push('404');
     }
 }

当然，事实上vue-router也提供了页面跳转时的钩子方法，全局的有beforeEach、afterEach等，我们希望直接在组件内使用，则可以使用beforeRouteEnter方法，在进入页面时进行判断，比如：

beforeRouteEnter (to, from, next) {
     next(vm => {
       if (!vm.check_user_privilege (current_page)) {
         vm.$Message.error('权限不足');
         vm.$router.push('404');
       }
     })
   },

具体可以参考[文档]。

当然，就这个例子来说，用vue-router提供的钩子还不如直接在mounted写判断条件，因为beforeRouteEnter方法中的next需要调用组件参数，是在mounted执行之后才执行的，而我们又经常需要在mounted钩子加载页面数据，为了避免浪费，先进行判断是比较好的。

和常用方法相比，简单方法是有额外开销的，主要在于需要完全加载路由，同时在加载页面后进行了一次判断。不过从写代码的角度来说，似乎逻辑上更节约，因为不用另外写一个集中进行权限控制的文件了，至于每个页面的权限判断，那是本来在菜单栏就要做的事情，延伸到不同页面也不算什么负担。

会不会有什么副作用呢？暂时来看似乎是没有的，如果在mounted最开始就进行页面权限判断，也不会有加载越权数据的问题，况且数据权限是后端需要单独判断的，不应该让前端去担心。

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

赞 (0)

相关推荐

  • 如何优雅地在vue中添加权限控制示例详解

    如何优雅地在vue中添加权限控制示例详解

    前言 在一个项目中,一些功能会涉及到重要的数据管理,为了确保数据的安全,我们会在项目中加入权限来限制每个用户的操作.作为前端,我们要做的是配合后端给到的权限数据,做页面上的各种各样的限制. 需求 因为这是一个工作上的业务需求,所以对于我来说主要有两个地方需要进行权限控制. 第一个是侧边菜单栏,需要控制显示与隐藏. 第二个就是页面内的各个按钮,弹窗等. 流程 1.如何获取用户权限? 后端(当前用户拥有的权限列表)-> 前端(通过后端的接口获取到,下文中我们把当前用户的权限列表叫做 permissi

  • 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

  • Vue2.0用户权限控制解决方案

    Vue-Access-Control是一套基于Vue/Vue-Router/axios 实现的前端用户权限控制解决方案,通过对路由.视图.请求三个层面的控制,使开发者可以实现任意颗粒度的用户权限控制. 安装 版本要求 Vue 2.0x Vue-router 3.x 获取 git:git clone https://github.com/tower1229/Vue-Access-Control.git npm:npm i vue-access-control 运行 //开发 npm run dev

  • vue中如何实现后台管理系统的权限控制的方法示例

    一.前言 在广告机项目中,角色的权限管理是卡了挺久的一个难点.首先我们确定的权限控制分为两大部分,其中根据粒的大小分的更细: 接口访问的权限控制 页面的权限控制 菜单中的页面是否能被访问 页面中的按钮(增.删.改)的权限控制是否显示 权限控制是什么 在权限的世界里服务端提供的一切都是资源,资源可以由请求方法+请求地址来描述,权限是对特定资源的访问许可,所谓权限控制,也就是确保用户只能访问到被分配的资源.具体的说,前端对资源的访问通常是由界面上的按钮发起,比如删除某条数据:或由用户进入某一个页面发

  • vue-router 权限控制的示例代码

    最近搭建了公司的后台管理系统, 而且系统还比较庞大, 要实现以下几点: 菜单权限, 根据不同权限显示不同的菜单 操作权限, 比如有些账号没有新增权限, 有些没有修改或者删除权限 数据权限, 比如统计概况, 普通管理员不能看到公司营业概况,但能看到自己所属区域的概况 显示权限, 比如列表, 运营能看到那一列的签约金额,但市场不能看到签约金额这一列 到目前为止还在构建中, 已经解决菜单权限和操作权限. 菜单权限: 最开始的时候也是按照楼上给出的方法,本地先配置一套路由,然后登陆成功后会从服务器返回一

  • 基于Vue实现后台系统权限控制的示例代码

    用Vue/React这类双向绑定框架做后台系统再适合不过,后台系统相比普通前端项目除了数据交互更频繁以外,还有一个特别的需求就是对用户的权限控制,那么如何在一个Vue应用中实现权限控制呢?下面是我的一点经验. 权限控制是什么 在权限的世界里服务端提供的一切都是资源,资源可以由请求方法+请求地址来描述,权限是对特定资源的访问许可,所谓权限控制,也就是确保用户只能访问到被分配的资源.具体的说,前端对资源的访问通常是由界面上的按钮发起,比如删除某条数据:或由用户进入某一个页面发起,比如获取某个列表数据

  • 详解基于vue-router的动态权限控制实现方案

    使用vue开发带权限管理系统,尤其是采用了vue-router做路由,很多人都遇到的一个问题就是如何动态加载路由path对应的component. 典型的应用场景就是:前端菜单不静态的写在vue程序里,而是要从后台程序和数据库返回的菜单来动态加载到vue应用中. 网上很多问权限的问题,但几乎找不到很好的解决答案,在很长一段时间里,非常打击使用vue技术栈开发的信心.最有质量的一篇文章是:http://www.jb51.net/article/124801.htm 但作者并没有完全解决这个问题,还

  • 基于vue,vue-router, vuex及addRoutes进行权限控制问题

    基于vue,vue-router, vuex及addRoutes进行权限控制问题

    基于vuex, vue-router,vuex的权限控制教程,完整代码地址见 https://github.com/linrunzheng/vue-permission-control 接下来让我们模拟一个普通用户打开网站的过程,一步一步的走完整个流程. 首先从打开本地的服务localhost:8080开始,我们知道打开后会进入login页面,那么判断的依据是什么. 首先是token. 没有登陆的用户是获取不到token的,而登陆后的角色我们会将token存到local或者seesionStor

  • 基于Vue自定义指令实现按钮级权限控制思路详解

    思路: 登录:当用户填写完账号和密码后向服务端验证是否正确,验证通过之后,服务端会返回一个token,拿到token之后(我会将这个token存贮到sessionStorage中,保证刷新页面后能记住用户登录状态),前端会根据token再去拉取一个 user_info 的接口来获取用户的详细信息(如用户权限,用户名等等信息). 权限验证:通过token获取用户对应的 role,自定义指令,获取路由meta属性里btnPermissions( 注: meta.btnPermissions是存放按钮

  • Vue2.0用户权限控制解决方案的示例

    Vue-Access-Control是一套基于Vue/Vue-Router/axios 实现的前端用户权限控制解决方案,通过对路由.视图.请求三个层面的控制,使开发者可以实现任意颗粒度的用户权限控制. 安装 版本要求 Vue 2.0x Vue-router 3.x 获取 git:git clone https://github.com/tower1229/Vue-Access-Control.git npm:npm i vue-access-control 运行 //开发 npm run dev

随机推荐