Vue项目实现简单的权限控制管理功能

在Vue项目中实现权限控制管理

对于一般稍大一些的后台管理系统，往往有很多个人员需要使用，而不同的人员也对应了不同的权限系统，后端的权限校验保障了系统的安全性，而前端的权限校验则提供了优秀的交互体验。

校验方式

前端对用户的权限信息进行校验往往在两个方面进行限制

  • 路由不可见
  • 元素不可见

通过以上两个方式，来将用户权限之外的内容隐藏掉。

路由不可见实现方法

在router.js中的meta字段中加入该路由的访问权限列表

{
  path: 'edit',
  name: 'edit',
  meta: {
    title: '编辑账户',
    auths:['edit_account']
  },
  component: () => import('pathToComponent/component.vue'),
},

Vue.router中提供了导航守卫，我们这里使用 全局前置守卫 对路由跳转进行权限校验

router.beforeEach(to,from,next)

参数 to 是即将进入的路由对象，我们可以在对象中拿到之前在router.js中定义的 route 对象，并获得 auths 字段

router.beforeEach((to,from,next)=>{
  const hasAuth = function(needAuths，haveAuths){   //判断用户是否拥有权限的function
    // implement
  }
  const havaAuths = []; // 用户拥有的权限列表
  if(!hasAuth(to.meta.auths,haveAuths)){
    //没有权限重定位到其他页面，往往是401页面
    next({replace:true,name:'otherRouteName'})
  }
  //权限校验通过,跳转至对应路由
  next();
})

在有侧边栏的后台管理中，还需要对侧边栏的路由导航进行隐藏，这里同样是通过拿到 route.meta.auths 字段进行过滤。

元素不可见实现方法

因为某些页面中会有一些特殊的接口调用或数据展示受到权限控制显示。前端通过控制元素的展示来隐藏掉用户不具有权限的元素，避免点击了某一个button导致接口401报错这样不友好的交互体验。

全局注册一个directive, directive官网介绍 。

//acl.js
const aclDirective = {
  inserted:function(el,binding){ // 在被绑定的元素插入到dom中时
    const hasAuth = function(needAuths，haveAuths){ //判断用户是否拥有权限的function
      // implement
    }
    const havaAuths = []; // 用户拥有的权限列表
    if(!hasAuth(binding.value,haveAuths)){ //binding.value 可以获得绑定指令时传入的参数
      el.style = "display:none"; //修改元素的可见状态
    }
  }
}
//main.js
Vue.directive('acl',aclDirective); //全局注册指令

在需要控制显示的组件上我们就可以通过 v-acl 进行权限控制

<button v-acl="['edit_access']">编辑账户</button>

总结

以上所述是小编给大家介绍的Vue项目实现简单的权限控制管理功能,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

赞 (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,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中如何实现后台管理系统的权限控制的方法示例

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

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

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

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

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

  • 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-router的动态权限控制实现方案

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

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

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

  • Vue项目实现简单的权限控制管理功能

    在Vue项目中实现权限控制管理 对于一般稍大一些的后台管理系统,往往有很多个人员需要使用,而不同的人员也对应了不同的权限系统,后端的权限校验保障了系统的安全性,而前端的权限校验则提供了优秀的交互体验. 校验方式 前端对用户的权限信息进行校验往往在两个方面进行限制 路由不可见 元素不可见 通过以上两个方式,来将用户权限之外的内容隐藏掉. 路由不可见实现方法 在router.js中的meta字段中加入该路由的访问权限列表 { path: 'edit', name: 'edit', meta: { t

  • vue项目中自定义video视频控制条的实现代码

    最近公司项目中,添加了视频模块,但是产品觉得Video自带的控制条有点LOW,于是自己设计了一个.于是开始了自定义Video控制的采坑之旅.. 首页效果图: 需求描述: 当鼠标放在图片上的时候,自动播放视频,并显示预览进度条,当鼠标移开,显示预览图片,再次hover图片,继续上次播放 视频详情页的效果图: 需求描述: 能自定义的暂停和播放 模仿进度条可实现拖拽播放速度 显示当前时间 能选择倍速 能控制声音 能全屏播放 接下来一步步的实现 首先康康首页的,上结构代码: <div class="

  • 详解如何在项目中应用SpringSecurity权限控制

    详解如何在项目中应用SpringSecurity权限控制

    目录 1.Spring Security环境准备 2.实现认证和授权 3.在控制器上实现注解鉴权 4.请求获取当前登录的用户名信息 5.用户退出 要进行认证和授权需要前面课程中提到的权限模型涉及的7张表支撑,因为用户信息.权限信息.菜单信息.角色信息.关联信息等都保存在这7张表中,也就是这些表中的数据是我们进行认证和授权的依据.所以在真正进行认证和授权之前需要对这些数据进行管理,即我们需要开发如下一些功能: 1.权限数据管理(增删改查) 2.菜单数据管理(增删改查) 3.角色数据管理(增删改查.

  • CI框架中通过hook的方式实现简单的权限控制

    根据自己的实际情况,需要两个文件,一个是权限控制类,Acl,另外一个是权限配置的文件acl.php放在了config这个目录下. Acl这个类放在了application/hook/acl.php.通过application/config/config.php文件开启hook,并且配置config这个目录下的hook.php文件. 1.开启hook功能,config.php这个文件 复制代码 代码如下: /* |------------------------------------------

  • django 通过url实现简单的权限控制的例子

    根据用户权限设定用户可以访问哪些页面,用django实现一个简单的demo. 1.models.py 文件 class level(models.Model): l_name = models.CharField(max_length=50,verbose_name="等级名称") l_permission = models.OneToOneField("permission") def __str__(self): return self.l_name class

  • 浅谈基于SpringBoot实现一个简单的权限控制注解

    注解是 JDK 5.0 引入的一种注释机制.注解可以作用在类型(类.接口.枚举等).属性.方法.参数等不同位置,具体的 JDK 版本所支持的注解位置可参考 java.lang.annotation.ElementType .此外还有注解的策略,也就是 RetentionPolicy ,这里不加赘述. 注解可以实现很多功能,其中最主要的就是进行代码标注,所以有时候注解也叫做标注.使用起来也基本顾名思义,就是对代码进行标注,简化部分代码的逻辑. 下面我们就着手实现一个简单的权限控制注解,来对注解有一

  • Vue实现两种路由权限控制方式

    目录 方式一:路由元信息(meta) 方式二:动态生成路由表(addRoutes) 路由权限控制常用于后台管理系统中,对不同业务人员能够访问的页面进行一个权限的限制. 对于无权限的页面可以跳转404页面或者提示无权限. 方式一:路由元信息(meta) 把所有页面都放在路由表中,只需要在访问的时候判断一下角色权限即可. vue-router 在构建路由时提供了元信息 meta 配置接口,我们可以在元信息中添加路由对应的权限,然后在路由守卫中检查相关权限,控制其路由跳转. 在 meta 属性里,将能

  • 在vue项目实现一个ctrl+f的搜索功能

    这次在项目中遇到了一个要做一个搜索功能,因为项目是vue的,而且是在手机端,所以对这个搜索功能的实现和能做到什么样子都没有底,在网上研究了一会,发现大家的解决方法都各有特色,有引入第三方包的,有遍历的,确实都可以实现,但我觉得在vue中这样的方法也太过繁琐了,于是经过一段时间的查询与思索后我自己写了个简单的方法,并记录下自己思索的过程 第一步 明确寻求 产品的一万种奇怪要求 对于开发来说,应该要知道自己需要什么,不需要什么,理解pm的需求,把功能以最符合ue的样子呈现出来,而这次的功能需求是非常

  • Python使用itchat模块实现简单的微信控制电脑功能示例

    本文实例讲述了Python使用itchat模块实现简单的微信控制电脑功能.分享给大家供大家参考,具体如下: #!/usr/bin/python #coding=UTF-8 import requests, json import itchat import os,time,datetime from PIL import ImageGrab from itchat.content import * app_dir = r''#打开一个程序,填写exe文件的绝对路径 imgdir = r'E:\t

  • Vue项目中使用better-scroll实现菜单映射功能方法

    Vue项目中使用better-scroll实现菜单映射功能方法

    组件全部代码 <template> <div class="goods"> <!--左侧区域--> <div class="menu-wrapper" ref="left"> <ul class="menu"> <li class="menu-item border-bottom" :class="{'current':curren

随机推荐