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. 2.创建NHibernateHelper帮助类,生成sessionFactory

    接上一篇文章 使用FluentNHibemate 操作数据库,添加映射到数据库 http://www.cnblogs.com/fzxiaoyi/p/8443586.html 在Model文件下再创建个 ...

  2. BZOJ - 3242 :快餐店 (基环树DP) 最小化半径

    题意:给定N点N边的无向连通图,现在让你在图中找一点作为餐厅,使得最远点距离这点最近. 思路:为了保留整数,我们求最小直径,最后去除2.  直径来源于两部分: 1,在外向树中: 那么就是树的直接,一棵 ...

  3. 前段性能----repaint和reflow

    在前面小节,我们对网页渲染过程做了介绍,其中最后两步就是layout与paint,当渲染对象被创建并添加到树中,它们并没有位置和大小,计算这些值的过程称为layout或reflow.绘制阶段,遍历渲染 ...

  4. list数组排序 Collections 按Date时间降序排列

    @ResponseBody @RequestMapping(value = {"K12", "12"}) public String refurbishLigh ...

  5. vue 自定义过滤器

    vue允许自定义过滤器,被用作一些常见文本的格式化.由“管道符”指示,格式如下: <!-- 在两个大括号中 --> {{message | capitalize}}   <!-- 在 ...

  6. LeetCode 1100. Find K-Length Substrings With No Repeated Characters

    原题链接在这里:https://leetcode.com/problems/find-k-length-substrings-with-no-repeated-characters/ 题目: Give ...

  7. Singer 修改tap-s3-csv 支持minio 连接

    singer 团队官方处了一个tap-s3-csv 的tap,对于没有使用aws 的人来说并不是很方便了,所以简单修改了 下源码,可以支持通用的s3 csv 文件的处理,同时发布到了官方pip 仓库中 ...

  8. Docker 更改容器映射端口

    1.编辑容器的配置文件进行更改端口: docker run 运行启动时 -p 可以指定容器启动映射端口 ( ) 可以编辑配置文件 进行修改:(需要重启docker 服务 不止是是容器 才能生效.只能重 ...

  9. [RN] React Native 打包时 减少 Apk 的大小

    React Native 打包时 减少 Apk 的大小 主要有两个方法: 在打包前设置 android\app\build.gradle 文件中 1) def enableProguardInRele ...

  10. 【JZOJ5553】【20190625】谜

    题目 给出一个\(2\times n\)个点的二分图的邻接矩阵\(M\) 以及\(m\)个行替换元,\(k\)个列替换元 \(q\)次询问:op u v 表示用第v个行/列替换元去替换矩阵的第u行/列 ...