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

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

此处用mockjs模拟

javascript 复制代码
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中

javascript 复制代码
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,所以不需要调用mutations
        try {
            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的菜单信息

html 复制代码
        <el-menu
          :default-active="$route.path"
          router
          active-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

javascript 复制代码
sessionStorage.clear();
相关推荐
quan26312 小时前
Vue实践篇-02,AI生成代码
前端·javascript·vue.js
qb3 小时前
vue3.5.18源码-编译-入口
前端·vue.js·架构
虫无涯3 小时前
【分享】基于百度脑图,并使用Vue二次开发的用例脑图编辑器组件
前端·vue.js·编辑器
NewChapter °3 小时前
如何通过 Gitee API 上传文件到指定仓库
前端·vue.js·gitee·uni-app
练习时长两年半的Java练习生(升级中)3 小时前
从0开始学习Java+AI知识点总结-30.前端web开发(JS+Vue+Ajax)
前端·javascript·vue.js·学习·web
小高0075 小时前
🧙‍♂️ 老司机私藏清单:从“记事本”到“旗舰 IDE”,我只装了这 12 个插件
前端·javascript·vue.js
EveryPossible6 小时前
终止异步操作
前端·javascript·vue.js
Stringzhua6 小时前
setup函数相关【3】
前端·javascript·vue.js
neon12046 小时前
解决Vue Canvas组件在高DPR屏幕上的绘制偏移和区域缩放问题
前端·javascript·vue.js·canva可画
李长鸿9 小时前
vue3中的插槽和其他
vue.js