import * as types from '../mutation-types'
const state = {
btnCode: getBtnCode(),
}
const mutations = {
getBtnObj(state, btnCodeObj) {
// 登录成功后获取--按钮权限
state.btnCode = btnCodeObj;
},
}
const getters = {
btnCode: state => state.btnCode
}
const actions = {
actionsBtnList({ commit }, btnlist) {
commit('getBtnObj', setBtnList(btnlist))
},
}
// 按钮--权限
function setBtnList(list) {
// 解决刷新后才出现按钮--权限的数据
let codeObj = {
'100010': btnCode('100010', list), // xxx按钮code码;
}
sessionStorage.setItem('btnObj', JSON.stringify(codeObj));
let btnCodeObj = JSON.parse(sessionStorage.getItem('btnObj')) || {}
return btnCodeObj
} function getBtnCode() {
return sessionStorage.getItem('btnObj') ? JSON.parse(sessionStorage.getItem('btnObj')) : {}
} function btnCode(code, list) {
// console.log(list,'按钮list')
return list.findIndex(e => {
return e.buttonCode == code
})
} export default {
state,
mutations,
getters,
actions
}

vue做页面按钮权限--分析的更多相关文章

  1. Vue多页面 按钮级别权限控制 directive指令控制

    利用driective 构建自己的指令,实现按钮级别权限 项目结构如下: 修改router.js { path: 'schools', name: '列表', component: () => ...

  2. vue+springboot后台实现页面按钮权限

    思路 1.用户跟角色关联 2.角色跟菜单关联 3.菜单跟菜单下的按钮关联 4.后端返回每个菜单下的按钮,前端通过自定义事件,在每个按钮上加上相应的事件 打字麻烦,还是看图吧! 建立btn.js 然后在 ...

  3. Spring Cloud实战: 基于Spring Cloud Gateway + vue-element-admin 实现的RBAC权限管理系统,实现网关对RESTful接口方法权限和自定义Vue指令对按钮权限的细粒度控制

    一. 前言 信我的哈,明天过年. 这应该是农历年前的关于开源项目 的最后一篇文章了. 有来商城 是基于 Spring Cloud OAuth2 + Spring Cloud Gateway + JWT ...

  4. Vue + Element UI 实现权限管理系统 前端篇(十三):页面权限控制

    权限控制方案 既然是后台权限管理系统,当然少不了权限控制啦,至于权限控制,前端方面当然就是对页面资源的访问和操作控制啦. 前端资源权限主要又分为两个部分,即导航菜单的查看权限和页面增删改操作按钮的操作 ...

  5. 使用VUE开发用户后台时的动态路由问题、按钮权限问题以及其他页面处理问题

    如今前后端分离是大势所趋,笔者虽然是做后台的,但也不得不学学前端的流行框架VUE -_-||| . 为了学习VUE,笔者搭建了一个简单的用户后台,以此来了解VUE的开发思路(注:本项目不用于实际开发, ...

  6. vue基于页面中按钮权限控制

    main.js // 权限 /** 权限指令,对按钮权限的控制 **/ Vue.directive('allow', { bind: function(el, binding) { // 通过当前按钮 ...

  7. Asp.Net Core 2.0 项目实战(11) 基于OnActionExecuting全局过滤器,页面操作权限过滤控制到按钮级

    1.权限管理 权限管理的基本定义:百度百科. 基于<Asp.Net Core 2.0 项目实战(10) 基于cookie登录授权认证并实现前台会员.后台管理员同时登录>我们做过了登录认证, ...

  8. 权限管理系统之集成Shiro实现登录、url和页面按钮的访问控制

    用户权限管理一般是对用户页面.按钮的访问权限管理.Shiro框架是一个强大且易用的Java安全框架,执行身份验证.授权.密码和会话管理,对于Shiro的介绍这里就不多说.本篇博客主要是了解Shiro的 ...

  9. net core体系-web应用程序-4asp.net core2.0 项目实战(1)-13基于OnActionExecuting全局过滤器,页面操作权限过滤控制到按钮级

    1.权限管理 权限管理的基本定义:百度百科. 基于<Asp.Net Core 2.0 项目实战(10) 基于cookie登录授权认证并实现前台会员.后台管理员同时登录>我们做过了登录认证, ...

随机推荐

  1. Shell 日常 ip 端口可用性测试

    ip port 可用测试 telnet 测试某个ip 端口是否可用很方便,但是如果ip比较多,写脚本就不方便了因为是阻塞的 这里强烈推荐 nc nc -z -w 1 127.0.0.1 8990 这里 ...

  2. 《团队名称》第八次团队作业:Alpha冲刺day3

    项目 内容 这个作业属于哪个课程 2016计算机科学与工程学院软件工程(西北师范大学) 这个作业的要求在哪里 实验十二 团队作业8-软件测试与ALPHA冲刺 团队名称 快活帮 作业学习目标 (1)掌握 ...

  3. Ruby——报错总结

    前言 记录ruby的一些报错 错误 Could not find a valid gem 'pumagem' (>= 0) in any repository ERROR: Could not ...

  4. 怎么避免写bug?

    1:关注可能的业务逻辑异常:业务逻辑异常 可以通过各种输入输出 和 预期进行比较 即可很快发现. 2:关注可能的运行逻辑异常: 如 copy对象: 对象引用等 这类异常只看代码逻辑时很难发现的:代码写 ...

  5. 第2章 Spring中的Bean

    2.1 Bean的配置 Bean本质是Java中的类.Spring可以被看做一个大型工厂,这个工厂的作用就是生产和管理Spring容器zho中的Bean.想在项目中使用这个工厂,就需要对Spring的 ...

  6. 强制结束虚拟机 centos home 卷丢失导致无法挂载进入 emergency mode 紧急模式

    参考文章: https://blog.51cto.com/13059784/2054378 xfs文件修复参考1:https://codeday.me/bug/20181112/367781.html ...

  7. node.js封装数据库增删改查

    数据库增删改查的封装 小编不容易 const sql = { insert: function (Collection, insertData) { return new Promise((resol ...

  8. [RN] React Native 使用开源库 react-native-image-crop-picker 实现图片选择、图片剪裁

    React Native 使用开源库 react-native-image-crop-picker 实现图片选择.图片剪裁 该库可以实现启动本地相册和照相机来采集图片,并且提供多选.图片裁剪等功能,支 ...

  9. 【Python笔记】1、格式化输出(%用法和format用法)

    转自:https://www.cnblogs.com/fat39/p/7159881.html 一.格式化输出1.整数的输出%o —— oct 八进制%d —— dec 十进制%x —— hex 十六 ...

  10. Linux搭建简单的http文件服务器111

    http://192.168.31.69:8090/file/http://47.92.90.25:21888/file/在Ubuntu中通过apt-get install apache2 安装apa ...