vue 按钮 权限控制介绍

目录
  • 一、步骤
    • 1.定义buttom权限
    • 2.定义store
    • 3.创建permission指令
    • 4.使用permission指令
    • 5.删除无权限数据
    • 6.传入状态管理数据
  • 二、概况

前言：

在日常项目中，会碰到需要根据后台接口返回的数据，来判断当前用户的操作权限。必须当有删除权限时，就显示删除按钮。没有这个权限时，就不显示或者删除这个按钮。通过查找资料，通过vuex来实现这个功能。

一、步骤

1.定义buttom权限

在state中创建buttomPermission，用于保存后台接口返回的权限数据。

setPermission用于接受数据，将页面权限管理传入到buttomPermission对象中。

使用vuex：

Vue.use(Vuex)

创建vue实例
const store = new Vuex.Store({
    state: {
        buttomPermission: {}
    },
    mutations: {
        setPermission(state, permission) {
            state.buttomPermission = permission
        }
    }
})
export default store

2.定义store

import store from './store/index.js'

new Vue({
    store,
    el: '#app',
    render: h => h(App)
})

3.创建permission指令

新建directives文件夹，创建permission.js文件。

这里使用inserted函数，在被绑定元素插入父节点时检测该元素是否有权限。

inserted( el, bindings, vnode ) { }

4.使用permission指令

在按钮页面引入和定义 permission指令，并且在buttom中写入指令，绑定指令中相对于的值。

 <button v-permission="'add'">添加</button>
import permission from './directives/permission'
directives: {permission,},

5.删除无权限数据

在permission指令,通过bindings获取该按钮绑定的value值，然后在buttomPermission对象中找到，然后判断是否有权限，如果没有权限，则删除该节点。

inserted(el, bindings, vnode) {
        let btnPermissionValue = bindings.value;
        let boolean =vnode.context.$store.state.buttomPermission[btnPermissionValue];
        !boolean && el.parentNode.removeChild(el);
    }

6.传入状态管理数据

将状态管理数据，通过setPermission方法传入到权限管理中

let permissions = {}
this.$store.commit("setPermission", permissions);

二、概况

总的来说，就是通过vuex定义一个buttomPermission权限状态对象，然后再创建一个permissions指令，通过对每个buttom按钮使用permissions指令，并且绑定该按钮特定意义的值。然后在permission.js文件中，获取当前value值，从buttomPermission中得到当前按钮是否有权限，没有则直接删除掉当前按钮节点。

到此这篇关于vue 按钮 权限控制介绍的文章就介绍到这了,更多相关vue 按钮 权限控制内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

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

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

  • Vue 动态路由的实现及 Springsecurity 按钮级别的权限控制

    思路 : 动态路由实现:在导航守卫中判断用户是否有用户信息, 通过调用接口,拿到后台根据用户角色生成的菜单树, 格式化菜单树结构信息并递归生成层级路由表并 使用Vuex保存,通过  router.addRoutes  动态挂载到  router  上,按钮级别的权限控制,则需使用自定义指令去实现. 实现: 导航守卫代码: router.beforeEach((to, from, next) => { NProgress.start() // start progress bar to.meta

  • 详解VUE前端按钮权限控制

    在用户登陆后,根据用户id读取用户的所有权限数据,放入本地的storage进行存储,之后,定义指令,如果用户含有此按钮权限,则在页面显示出来: /**权限指令**/ Vue.directive('has', { bind: function(el, binding) { if (!Vue.prototype.$_has(binding.value)) { el.parentNode.removeChild(el); } } }); //权限检查方法 Vue.prototype.$_has = f

  • vue 按钮 权限控制介绍

    目录 一.步骤 1.定义buttom权限 2.定义store 3.创建permission指令 4.使用permission指令 5.删除无权限数据 6.传入状态管理数据 二.概况 前言: 在日常项目中,会碰到需要根据后台接口返回的数据,来判断当前用户的操作权限.必须当有删除权限时,就显示删除按钮.没有这个权限时,就不显示或者删除这个按钮.通过查找资料,通过vuex来实现这个功能. 一.步骤 1.定义buttom权限 在state中创建buttomPermission,用于保存后台接口返回的权限

  • Vue 页面权限控制和登陆验证功能的实例代码

    页面权限控制 页面权限控制是什么意思呢? 就是一个网站有不同的角色,比如管理员和普通用户,要求不同的角色能访问的页面是不一样的.如果一个页面,有角色越权访问,这时就得做出限制了. Vue 动态添加路由及生成菜单 这是我写过的一篇文章, 通过动态添加路由和菜单来做控制,不能访问的页面不添加到路由表里,这是其中一种办法. 另一种办法就是所有的页面都在路由表里,只是在访问的时候要判断一下角色权限.如果有权限就让访问,没有权限就拒绝,跳转到 404 页面. 思路: 在每一个路由的 meta 属性里,将能

  • vue实现权限控制路由(vue-router 动态添加路由)

    用户登录后返回权限菜单,前端根据权限菜单动态添加路由,然后再动态生成菜单栏. 思路如下: 一.定义初始化默认路由. 二.动态配置路由,这里是把所有组件中相应的路由配置成一个个的对象,根据后台返回的菜单tree一个个去匹配. 三.通过匹配,把匹配好的路由数据addRoutes到路由中. 四.为了防止刷新页面后路由数据被清空,这里用判断是否登录的方式,再次加载动态路由. 具体代码如下: router.js import Vue from 'vue' import {router} from './i

  • Vue路由权限控制解析

    Vue路由权限控制解析

    前言 本人在公司主要负责中后台系统的开发,其中路由和权限校验算是非常重要且最为基本的一环.实际开发项目中,关于登录和路由权限的控制参照了vue-element-admin这个明星项目,并在此基础上基于业务进行了整合,接下来我会以这个项目为例,仔细地剖析整个路由和权限校验的过程,也算是对这个知识点的一些总结. 项目总体目录结构 进入今天主题之前,我们先来梳理下整个项目,src目录下的. api: 接口请求 assets: 静态资源 components: 通用组件 directive: 自定义指令

  • Swift中的Access Control权限控制介绍

    如果您之前没有接触过权限控制,先来听一个小故事: 小明是五道口工业学院的一个大一新生,最近他有点烦恼,因为同屋经常用他的热水壶,好像那是自己家的一样,可是碍于同学情面,又不好意思说.直到有一天,他和学姐小K吐槽. 学姐听了之后,说:大学集体生活里面,大部分东西都是默认室友可以共用的.如果你不想别人拿,我可以帮你做封印,只要打上private标记,它们就看不到你的东西,更加用不了你的东西了. 小明说哇靠学姐你还会妖法...... Swift语言从Xcode 6 beta 5版本起,加入了对权限控制

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

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

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

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

  • vue基于Element按钮权限实现方案

    背景需求:ERP系统需增加 "按钮权限控制" 功能,对权限的控制粒度要普及到按钮层级. 预期 按钮权限控制的交互方式无非两种:"不可见" 和 "可见不可点". 不可见 不可见的交互方式相对简单,我们可使用 v-if 控制其是否显示.使用 v-show 也行,但不够保险,毕竟 v-show 只是把样式改成 display: none,在真实的 DOM 渲染还是存在的,所以更推荐 v-if 来控制不可见. 可见不可点 "看是能看了,但你不行

随机推荐