vue权限控制——按钮控制

最新推荐文章于 2024-05-13 18:36:09 发布
最新推荐文章于 2024-05-13 18:36:09 发布
阅读量302 收藏 1
点赞数
文章标签： vue java javascript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shinjie1210/article/details/118601210
版权

本文续接上一篇博客vue权限控制——动态路由

因为写完才想起来，所以直接上传完整的代码，下载地址：提取码：Shin

提示：此处下载的是完成后的代码 

目录

数据初始化

 添加权限信息到路由组件

编辑自定义指令

数据初始化

 此处提供的数据不包含依赖，需要自行通过控制台安装依赖

npm  install

接下来是取消vue纠错 ，在文件夹下新增vue.config.js文件，写入以下代码

module.exports = {
  lintOnSave: false
}

然后修改mock数据，我们不想让普通用户具有增加商品的权限，所以要进行修改

把普通用户权限下的普通用户1里去掉add

最低0.47元/天 解锁文章
shinjie1210
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue 权限指令 封装
liuhao9999的博客
04-20 5441
import Vue from 'vue' import store from '@/store' /** * Action 权限指令 * 指令用法： * - 在需要控制 action 级别权限的组件上使用 v-action:[method] , 如下： * <i-button v-action:add >添加用户</a-button> * <a-button v-action:delete>删除用户</a-button> * .
vue按钮权限控制
gswwxyhk的博客
12-09 181
src/common/array.js 可以根据需要修改 export function checkArray(key){ // let arr = ['1','2','5','9'] let index = arr.indexOf(key) if(index>-1){ return true }else{ return false } } 自定义指令 main.js或者单独提出来 import {checkArray
vue内置指令详解
08-27
指令是Vue模板中最常用的一项功能，它带有前缀v-，主要职责是当其表达式的值改变时，相应的将某些行为应用在 DOM 上。这篇文章主要介绍了vue内置指令详解,需要的朋友可以参考下
vue要做权限管理该怎么做？如果控制到按钮级别的权限怎么做？
最新发布
林恒的博客
05-13 1090
如果路由很多，可以在应用初始化的时候，只挂载不需要权限控制的路由。取得后端返回的菜单后，根据菜单与路由的对应关系，筛选出可访问的路由，通过addRoutes动态挂载。每次路由跳转的时候都要判断权限，这里的判断也很简单，因为菜单的name与路由的name是一一对应的，而后端返回的菜单就已经是经过权限过滤的。登录后，获取用户的权限信息，然后筛选有权限访问的路由，在全局路由守卫里进行调用addRoutes添加路由。如果有嵌套路由，后端功能设计的时候，要注意添加相应的字段，前端拿到数据也要做相应的处理。
Vue相关
Komorebi_00的博客
11-02 240
v-bind绑定一个value属性；v-on指令给当前元素绑定input事件。自定义：自己写model属性，里面放上prop和event避免组件中数据互相影响。组件是可复用的，data若为对象，则所有复用的组件都是引用同一个数据；data若为函数，每次函数都会创建一个新的数据，从而使每个组件数据相互独立在router目录下的index.js文件中，对path属性加上/:id。使用router对象的params.id。动态组件就是 component 组件 ，是指不同组件之间进行动态切换。
vue vuex操作按钮权限控制
@必意玲
08-26 1554
文章目录1. 一张图搞懂按钮权限逻辑1. 第一步：创建src/directives/permission.js2. 第一步：在 store/user.js 中3. 第三步：在routerConfig.js（路由拦截器里面）4. 触发步骤 1. 一张图搞懂按钮权限逻辑 好了，下面是具体实现步骤。 1. 第一步：创建src/directives/permission.js 1.1 思路： 在vue全局挂载方法$_has,主要实现思路是将页面的按钮英文名传入，用以对比目前是否在权限数组里面 方法定义好以后在m
前端学习（2204）：Vue-mutations的类型常量
歌谣的博客
09-17 227
app.vue <template> <div id="app"> <h2>{{message}}</h2> <h2>{{$store.state.counter}}</h2> <button @click="addtion">+</button> <button @click="subtraction">-</button> &lt...
基于Vue/Vue-Router/axios 实现的前端用户权限控制解决方案
11-20
本文将深入探讨基于Vue/Vue-Router/axios的前端用户权限控制解决方案——Vue-Access-Control。 首先，Vue.js是一个轻量级的渐进式JavaScript框架，它的核心库专注于视图层，易于上手且可与现有项目无缝集成。Vue-...
前端经典——vue实现穿梭框demo.rar
11-29
"前端经典——vue实现穿梭框demo"这个项目是基于Vue.js的一个示例，旨在展示如何利用Vue来构建一个功能完备的穿梭框组件。穿梭框，又称为选择框或数据迁移框，通常用于在两个列表之间移动数据，常用于权限设置、角色...
详解VueJS应用中管理用户权限
01-19
作为代替方案，一个简洁轻量的库——CASL——可以让管理用户权限变得非常简单。只要你用CASL定义了权限，并设置了当前用户，就可以把上面的代码改为这样： if (abilities.can('update', 'Post')) { ... } 在这篇
基于and-design-vue的vue后台管理系统模板.zip
05-08
Andesign Vue是对Ant Design设计系统的Vue实现，遵循其设计理念——"Mobile First"和"Design for Developers"。它提供了诸如表格、按钮、输入框、选择器、通知、模态框等大量可复用的组件，这些组件都经过了精心...
管理系统系列--Vue2.0+Vue-router+ElementUI实现的后台管理系统模板.zip
02-25
【ElementUI】：ElementUI是一套为开发者、设计师和产品经理准备的基于Vue2.0的组件库，提供了一系列丰富且易于使用的UI组件，如按钮、表单、表格、对话框、通知等。ElementUI的设计理念是简洁、易用，旨在提升开发...
项目中权限功能
weixin_30727835的博客
06-14 1435
记录两个项目中的权限校验实现方式 1.OKR（一个项目）权限校验 使用github上开源框架ant-design-pro 路由权限的实现方式是通过获取当前用户的权限去比对路由表，生成当前用户具有的权限可访问的路由表，通过 router.addRoutes 动态挂载到 router 上。 OKR中每个页面的权限都是动态从后端配置的，可以在后台通过一个 tree 或者其它展现形式给每一个页面动...
基于Vue的前端权限管理
一缕青丝飞向远方的博客
12-20 1586
前端涉及到的权限管理部分
VUE学习——指令
qq_36695156的博客
07-27 192
1.v-if v-if是条件渲染指令，它根据表达式的真假来删除和插入元素，它的基本语法：v-if="expression" 这里的expression返回的是一个boolean值，false或者true。。 往往v-if指令与template标签连用，比如下面这段代码： <template v-if "menuFlag == '1'">服务场景</template&gt...
vue实现简单权限按钮
nubdhsj的博客
04-19 185
vue实现简单权限按钮
按钮权限配置方式
weixin_44832362的博客
01-14 862
按钮权限控制
vue按钮权限的实现
m0_71933813的博客
03-15 297
然后在main.ts中定义一个函数(自定义指令),参数1：自定义指令名称，参数2：在钩子函数（挂载之后）传两个参数el和binding，el是绑定指令元素对象，binding是指令所传递的数据。在按钮中，以v-加上自定义名称来使用，如添加系统指令一样（v-permission自定义指令）然后获取状态管理中存储的用户权限与自定义指令传递过来的值进行判断是否相等。权限按钮就是不同的用户等级的用户可以进行操作也不同。登录成功之后，取到当前用户的权限并存储到状态管理中。
Vue3 按钮权限控制（自定义指令）
m0_59420288的博客
06-29 2639
很多后台管理系统会用到权限管理。菜单权限比较好控制，按钮权限相对来说复杂一些，在此以Vue3为例，介绍如何通过自定义指令来判断是否拥有权限，动态控制按钮的显示（无废话）
vue权限控制到按钮 源码
08-30
下面我将简要介绍Vue权限控制到按钮的实现方式。 通常情况下，我们可以使用Vue的指令来控制按钮的显示与隐藏，从而实现权限控制。具体步骤如下： 1. 在Vue组件中定义一个方法，用来判断当前用户是否有权限访问该...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值