vue做页面按钮权限--分析
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做页面按钮权限--分析的更多相关文章
- Vue多页面 按钮级别权限控制 directive指令控制
利用driective 构建自己的指令,实现按钮级别权限 项目结构如下: 修改router.js { path: 'schools', name: '列表', component: () => ...
- vue+springboot后台实现页面按钮权限
思路 1.用户跟角色关联 2.角色跟菜单关联 3.菜单跟菜单下的按钮关联 4.后端返回每个菜单下的按钮,前端通过自定义事件,在每个按钮上加上相应的事件 打字麻烦,还是看图吧! 建立btn.js 然后在 ...
- Spring Cloud实战: 基于Spring Cloud Gateway + vue-element-admin 实现的RBAC权限管理系统,实现网关对RESTful接口方法权限和自定义Vue指令对按钮权限的细粒度控制
一. 前言 信我的哈,明天过年. 这应该是农历年前的关于开源项目 的最后一篇文章了. 有来商城 是基于 Spring Cloud OAuth2 + Spring Cloud Gateway + JWT ...
- Vue + Element UI 实现权限管理系统 前端篇(十三):页面权限控制
权限控制方案 既然是后台权限管理系统,当然少不了权限控制啦,至于权限控制,前端方面当然就是对页面资源的访问和操作控制啦. 前端资源权限主要又分为两个部分,即导航菜单的查看权限和页面增删改操作按钮的操作 ...
- 使用VUE开发用户后台时的动态路由问题、按钮权限问题以及其他页面处理问题
如今前后端分离是大势所趋,笔者虽然是做后台的,但也不得不学学前端的流行框架VUE -_-||| . 为了学习VUE,笔者搭建了一个简单的用户后台,以此来了解VUE的开发思路(注:本项目不用于实际开发, ...
- vue基于页面中按钮权限控制
main.js // 权限 /** 权限指令,对按钮权限的控制 **/ Vue.directive('allow', { bind: function(el, binding) { // 通过当前按钮 ...
- Asp.Net Core 2.0 项目实战(11) 基于OnActionExecuting全局过滤器,页面操作权限过滤控制到按钮级
1.权限管理 权限管理的基本定义:百度百科. 基于<Asp.Net Core 2.0 项目实战(10) 基于cookie登录授权认证并实现前台会员.后台管理员同时登录>我们做过了登录认证, ...
- 权限管理系统之集成Shiro实现登录、url和页面按钮的访问控制
用户权限管理一般是对用户页面.按钮的访问权限管理.Shiro框架是一个强大且易用的Java安全框架,执行身份验证.授权.密码和会话管理,对于Shiro的介绍这里就不多说.本篇博客主要是了解Shiro的 ...
- net core体系-web应用程序-4asp.net core2.0 项目实战(1)-13基于OnActionExecuting全局过滤器,页面操作权限过滤控制到按钮级
1.权限管理 权限管理的基本定义:百度百科. 基于<Asp.Net Core 2.0 项目实战(10) 基于cookie登录授权认证并实现前台会员.后台管理员同时登录>我们做过了登录认证, ...
随机推荐
- python应用-跑马灯
import os import time def main(): str1='欢迎来到前锋学习Python' while True: os.system('cls') print(str1) tim ...
- Consul 的 Docker 镜像使用
1.镜像官方网址:https://hub.docker.com/_/consul 2.pull 镜像: docker pull consul:1.6.0 3.创建容器(默认http管理端口:8500) ...
- 通过jar包名称,获取maven的依赖信息GAV
烦恼:当我们手上有一堆三方件jar包,想要转成maven管理时,需要一个一个配置进pom文件中,而且GAV信息还得去收集. 为了快速生成如下信息,我们可以这样.... GAV:groupId + ar ...
- [nodemon] app crashed - waiting for file changes before starting...
慕课网前端工程师晋升课程 Vue全家桶+SSR+Koa2全栈开发美团网 视频里用 npx create-nuxt-app mt-app创建项目后,不能使用import ...from....跟着老师修 ...
- vim文本编辑器——文件导入、命令查找、导入命令执行结果、自定义快捷键、ab命令、快捷键的保存
1.文件的导入(r): 导入前: 导入后: 在光标处,将tmp目录下的zhbb文件的内容导入到了当前文件. 2.命令的查找: 3.导入命令的执行结果: 光标所在行为导入的位置. 4.自定义快捷键: ( ...
- json-server模拟服务器API
一.npm安装 npm install --global json-server 二.使用:创建一个json数据文件,比如: { "students": [{ "id&q ...
- ffmpeg结合SDL编写播放器(三)
接下来是解析影片的帧 /*** project.c ***/ #include<stdio.h> #include<libavcodec/avcodec.h> #include ...
- 「HNOI2015」亚瑟王
传送门 Description 小 K 不慎被 LL 邪教洗脑了,洗脑程度深到他甚至想要从亚瑟王邪教中脱坑. 他决定,在脱坑之前,最后再来打一盘亚瑟王.既然是最后一战,就一定要打得漂亮.众所周知,亚瑟 ...
- KD-Tree总结
KD-Tree总结 问题引入 平面上有\(n\)个点,\(q\)组询问,每一次查询距离\((x,y)\)最近的点对,强制在线. 问题解决 暴力 显然我们可以直接枚举点然后算距离取\(min\),这样子 ...
- ReentrantLock源码学习总结 (二)
[^]: 以下源码分析基于JDK1.8 ReentrantLock 示例 private ReentrantLock lock = new ReentrantLock(true); public vo ...