vue-element-template管理模板（二）

最新推荐文章于 2024-08-08 08:30:18 发布

看客过客皆是客

最新推荐文章于 2024-08-08 08:30:18 发布

阅读量565

点赞数

分类专栏： vue-element-admin 文章标签：前端

本文链接：https://blog.youkuaiyun.com/qq_32812063/article/details/131868242

版权

vue-element-admin 专栏收录该内容

6 篇文章

订阅专栏

文章介绍了在vue-element-admin框架中如何实现动态路由，通过获取用户角色来过滤异步路由表，确保用户只能访问有权限的页面。代码示例展示了如何从接口获取菜单数据，然后根据用户角色过滤路由并设置到store中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue-element-admin框架动态路由（二）

修改代码：

import { asyncRoutes, constantRoutes } from "@/router";
import { getMenu } from "@/api/user";
import Layout from "@/layout";

/**
 * Use meta.role to determine if the current user has permission
 * @param roles
 * @param route
 */
function hasPermission(roles, route) {
    if (route.meta && route.meta.roles) {
        return roles.some((role) => route.meta.roles.includes(role));
    } else {
        return true;
    }
}

/**
 * Filter asynchronous routing tables by recursion
 * @param routes asyncRoutes
 * @param roles
 */
export function filterAsyncRoutes(routes, roles) {
    const res = [];
    routes.forEach((route) => {
        const tmp = {...route };
        if (hasPermission(roles, tmp)) {
            const component = tmp.component;
            if (route.component) {
                if (component == "Layout") {
                    tmp.component = Layout;
                } else {
                    // 接口组件字符串转换成组件对象
                    tmp.component = (resolve) =>
                        require([`@/views${component}`], resolve);
                }
                if (tmp.children) {
                    tmp.children = filterAsyncRoutes(tmp.children, roles);
                }
            }
            res.push(tmp);
        }
    });
    return res;
}

const state = {
    routes: [],
    addRoutes: [],
};

const mutations = {
    SET_ROUTES: (state, routes) => {
        state.addRoutes = routes;
        state.routes = constantRoutes.concat(routes);
    },
};

const actions = {
    generateRoutes({ commit }, roles) {
        return new Promise((resolve, reject) => {
            getMenu()
                .then((response) => {
                    let accessedRoutes; //获取菜单数据
                    accessedRoutes = filterAsyncRoutes(
                        response.data.permissionList,
                        roles
                    ); //存储菜单数据到store
                    console.log(accessedRoutes);
                    commit("SET_ROUTES", accessedRoutes);
                    resolve(accessedRoutes);
                })
                .catch((error) => {
                    reject(error);
                });
        });
    },
};

export default {
    namespaced: true,
    state,
    mutations,
    actions,
};