当前位置: 首页 > news >正文

vue权限管理——菜单权限设置

1.前提:后端提供菜单对应数据

此处用mockjs模拟

const menuList = [{'id': 1, path:'/uploadSpec','authName': "上传spec", icon: 'User', children:[], rights:['view','add','edit','delete']},{'id': 2, path:'/showSpec', 'authName': "Spec预览", icon: 'DataAnalysis',children:[], rights:['view','add','edit','delete']},{'id': 3, path:'/generateTxt', 'authName': "生成测试数据", icon: 'DataAnalysis',children:[], rights:['view','add','edit','delete']},{'id': 4, path:'/generateCronjob', 'authName': "生成转码程序", icon: 'Promotion',children:[], rights:['view','add','edit','delete']},{'id': 5, path:'/pdfCompare', 'authName': "PDF文档对比", icon: 'DocumentCopy',children:[], rights:['view','add','edit','delete']},{'id': 6, path:'/resourceUpdate', 'authName': "资源更新管理", icon: 'Management',children:[], rights:['view','add','edit','delete']},{'id': 7, path:'/generateTestCase', 'authName': "自动生成ST/SIT案例", icon: 'Files',children:[], rights:['view','add','edit','delete']},{'id': 8, path:'/userManagement', 'authName': "用户管理", icon: 'User', rights:['view']},{'id': 9, path:'/roleManagement', 'authName': "角色管理", icon: 'Stamp', rights:['view']},
]

2.登录后将获取的菜单信息同时设置到vuex和sessionStorage中

import * as api from '@/api/api'
import { ElMessage } from 'element-plus'const state = () => {return {user:JSON.parse(sessionStorage.getItem("user") || '{}'),menuList: JSON.parse(sessionStorage.getItem("menuList") || '[]'),}
}const getters = () => {}const actions = {// 注意async位置和箭头函数写法login: async({ commit }, user) => {// 调用登录接口try {let result = await api.login(user);if (result.data.code === 200) {sessionStorage.setItem("token", result.data.data.token);// 调用获取user信息接口let loginUser = await api.getLoginUser();// 调用mutations的login方法if (loginUser.data.code === 200) {commit('login', loginUser.data.data);} else {ElMessage.error("登录失败:用户信息获取失败");}} else {ElMessage.error("登录失败:" + result.data.errorMsg);}} catch (error) {throw error;}},register: async({ commit, state }, user) => {// 调用注册接口,注册不需要更新vuex,所以不需要调用mutationstry {let registerUser = await api.register(user);if (registerUser) return registerUser;} catch (error) {throw error;}},
}const mutations = {initUser: (state) => {// 从localStorage中获取数据设置进user中,否则通过刷新页面时,获取不到state中的user信息state.user = JSON.parse(sessionStorage.getItem("loginUser"));},login: (state, user) => {// 登录成功后将user信息存到state中,且缓存到localStorage中        state.user = user;state.menuList = user.menuList;sessionStorage.setItem("loginUser", JSON.stringify(user));sessionStorage.setItem("menuList", JSON.stringify(user.menuList));},
}export default {namespaced: true,state,getters,actions,mutations
}

3. TAside.vue侧边栏中引入vuex的菜单信息

        <el-menu:default-active="$route.path"routeractive-text-color="#ffd04b"background-color="#545c64"text-color="#fff"><template #title><el-icon><i-ep-message /></el-icon>导航菜单</template><!-- 根据后端返回rights数据渲染菜单 --><el-menu-item :index="menu.path" v-for="menu in menuList" :key="menu.id">{{menu.authName}}</el-menu-item></el-menu>
...
import { computed } from "vue";
import { useStore } from "vuex";const store = useStore();
const menuList = computed(() => store.state.user.menuList);
...

4.问题:如果刷新后菜单栏消失

就是菜单数据没有设置到本地sessionStorage中

5.退出登录后需要清空sessionStorage

sessionStorage.clear();

http://www.lryc.cn/news/141390.html

相关文章:

  • 【LeetCode】228.汇总区间
  • Qt快速学习(二)--QMainWindow,对话框,布局管理器,常用控件
  • 群晖DSM下套件及系统网页服务器ssl证书自动更新
  • 【Flink】Flink架构及组件
  • React Navigation 开发准备
  • 前端面试:【前端安全】安全性问题与防范措施
  • [Linux]进程
  • 01-jupyter notebook的使用方法
  • pytestx容器化执行引擎
  • (动态规划) 剑指 Offer 42. 连续子数组的最大和 ——【Leetcode每日一题】
  • OLED透明屏曲面技术:创新突破引领显示行业未来
  • 视频云存储/安防监控EasyCVR视频汇聚平台分发rtsp流时,出现“用户已过期”提示该如何解决?
  • 调用paddleocr接口实现文本检测与识别,并在图像中显示识别结果
  • 如何提升winform程序性能
  • 按钮权限控制
  • 【脚本式设置环境变量】
  • 软件开发bug问题跟踪与管理
  • springboot+mp完成简单案例
  • cuml机器学习GPU库 sklearn升级版AutoDL使用
  • C语言练习题Day1
  • 使用kubeadm安装和设置Kubernetes(k8s)
  • Docker安装延迟队列插件
  • 推荐前 6 名 JavaScript 和 HTML5 游戏引擎
  • 【Django】 Task5 DefaultRouter路由组件和自定义函数
  • Git拉取分支、基于主分支创建新的开发分支、合并开发分支到主分支、回退上一次的merge操作
  • SpringBoot实现定时任务操作及cron在线生成器
  • 数据结构(Java实现)-栈和队列
  • 毕业季如何做好IT技术面试
  • springcloud3 GateWay章节-Nacos+gateway(跨域,filter过滤等5
  • Nodejs+Typescript+Eslint+Prettier+Husky项目构建