Vue项目实现简单的权限控制

chaosx110 发布于2019-08-26 18:37 / 1947人阅读

摘要：路由不可见实现方法在中的字段中加入该路由的访问权限列表字段。元素不可见实现方法因为某些页面中会有一些特殊的接口调用或数据展示受到权限控制显示。

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

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

校验方式

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

路由不可见

元素不可见

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

路由不可见实现方法

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

{
    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。

//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进行权限控制

GPU云服务器云服务器简单的asp项目 js实现的简单特效用c实现简单的shell java实现简单的web服务器

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/110297.html

Vue项目实现简单的权限控制

摘要：路由不可见实现方法在中的字段中加入该路由的访问权限列表字段。元素不可见实现方法因为某些页面中会有一些特殊的接口调用或数据展示受到权限控制显示。在Vue项目中实现权限控制管理对于一般稍大一些的后台管理系统，往往有很多个人员需要使用，而不同的人员也对应了不同的权限系统，后端的权限校验保障了系统的安全性，而前端的权限校验则提供了优秀的交互体验。校验方式前端对用户的权限信息进行校验往往...

fou7 2019-08-02 15:34 评论0 收藏0
手摸手，带你用vue撸后台系列二(登录权限篇)

摘要：我们将登录按钮上绑上事件，点击登录之后向服务端提交账号和密码进行验证。所以前端和后端权限的划分是不太一致。侧边栏最后一个涉及到权限的地方就是侧边栏，不过在前完整项目地址：vue-element-admin 系列文章：手摸手，带你用vue撸后台系列一（基础篇）手摸手，带你用vue撸后台系列二(登录权限篇) 手摸手，带你用vue撸后台系列三 (实战篇) 手摸手，带你用vu...

不知名网友 2019-08-20 16:45 评论0 收藏0
VUE知识点集锦

摘要：载入前后在阶段，实例的和都初始化了，但还是挂载之前为虚拟的节点，还未替换。类似于，不同在于提交的是，而不是直接变更状态可以包含任意异步操作。 vue基础 1、 router 路由与 a 标签的区别：https://www.jianshu.com/p/34b...2、 VUE双向绑定的原理：答：VUE实现双向数据绑定的原理就是利用了 Object.defineProperty() 这个...

Tecode 2019-08-23 16:02 评论0 收藏0
VUE知识点集锦

摘要：载入前后在阶段，实例的和都初始化了，但还是挂载之前为虚拟的节点，还未替换。类似于，不同在于提交的是，而不是直接变更状态可以包含任意异步操作。 vue基础 1、 router 路由与 a 标签的区别：https://www.jianshu.com/p/34b...2、 VUE双向绑定的原理：答：VUE实现双向数据绑定的原理就是利用了 Object.defineProperty() 这个...

APICloud 2019-08-02 14:34 评论0 收藏0
关于前后端分离权限控制，元素细粒度（iview-admin实现）

摘要：按钮方面按钮通过自定义指令绑定其特定的操作接口信息如产品上传按钮，需要拥有产品上传的信息，才可以继续执行按钮的业务逻辑。开篇啰嗦几句在传统单体项目中，通常会有一些框架用来管理熟知的权限。如耳濡目染的 Shiro 或者 Spring Security 。然而，到了现在这个时代，新开始的项目会更多的才用后端微服务 + 前端 mvvm 的架构开始书写项目。权限控制方面将变得有些许晦涩。当...

YorkChen 2019-08-23 15:39 评论0 收藏0