vue----vue-router

 

权限管理

方式1：

本地放一份完整的菜单数据,通过后台返回角色的菜单列表.两者对比,筛选需要显示的菜单数据绑定,

这里有个问题就是路由vue实例初始化就生成了,加载的全部,人为输入地址是可以访问到角色权限以外的数据,

所以还要加路由构子router.beforeEach()去做判断哪些是角色权限以内的路由.

由于我们菜单栏是通过roles自动生成的,所以我们第一步,根据不同的用户返回不同的菜单(不能解决用户直接输入网址访问)

 1、给router设置属性，比如在mete中添加一个roles

{
        path: "/",
        name: "dashboard",
        hidden: true,
        component: Layout,
        redirect: "/home", //父路由没有在mete中设置roles,表示任何人都可以访问
        children: [
            {
                path: "/home",
                name: "home",
                meta: {title: '首页', icon: 'fa fa-home',roles:["admin","xx"]},  //子路由设置了roles,表示只有admin和xx可以访问
                component: () => import("@/views/Home.vue")
            }
        ]
    },

 2、当用户登录的时候，保存user的时候，我们遍历routes中的每一个route，判断该路由时候被过滤掉（在actions.js中设置）

import {routes} from "@/router";

import {ActionTree} from 'vuex';
import jwt_decode from 'jwt-decode';


const actions: ActionTree<any, any> = {
    async setUser({state, commit}, user: any) {
        var jwtDecode:any = jwt_decode(user);
        //设置user信息
        commit('SET_USER', jwtDecode);

        //----------------设置用户访问路由的权限---------------------
        //获取jwtDecode中的user_roles,user信息中需要有user_roles(后台返回的)
        const { user_roles } = jwtDecode;
        //过滤路由(routes:当前的所有的路由)
        let accessedRouters = filterAsyncRouter(routes,user_roles);
        commit('SET_ROUTERS', accessedRouters);
    }
}

/**
 * 递归对routers进行过滤，返回routers
 * route:当前路由对象
 */
function filterAsyncRouter(asyncRouterMap: Array<any>,roles:any) {
    const accessedRouters = asyncRouterMap.filter(route => {
        if (hasPermission(roles,route)) {
            if (route.children && route.children.length) {
                route.children = filterAsyncRouter(route.children,roles);
            }
            return true;
        }
        return false;
    });
    return accessedRouters;
}

/**
 * 判断是否有权限
 * @param roles 当前角色
 * @param route 当前路由对象
 * */
function hasPermission(roles: any, route: any) {
    if (route.meta && route.meta.roles) {
        //roles是自己设置的一个数组
        return route.meta.roles.some((role: string) => role.indexOf(roles) >= 0)
    }else {
        //如果当前路由对象routes.meta没有roles属性,表示任何人都可以访问路由
        return true;
    }
}

export default actions;

解决用户直接输入网址访问的问题

 

import jwt_decode from 'jwt-decode';
router.beforeEach((to, form, next) => {  //拦截上面配置的路由
    // 获取用户登录状态
    var isLogin = localStorage.getItem("token") != null ? true : false;

    // 注销
    if (to.path == '/logout') {
        // 清空
        localStorage.clear()
        // 跳转到登录
        next({path: '/login'});
    }

    if (to.path != '/login' && to.path != '/password') {
        //如果没有登录
        if (isLogin == false) {
            next({path: '/login'});
        }
        //如果已经登录,判断是否具有访问该路由的资格
        else {
            const decoded: any=jwt_decode(localStorage. tsToken);
            const { user_roles }=decoded;
            // @ts-ignore
            if (hasPermission(user_roles,to)) {
                next();
            } else {
                next('/404'); // 没有权限进入
            }
        }

    }
    // 下一个路由
    next();
});
function hasPermission(roles: any, route: any) {
    if (route.meta && route.meta.roles) {
        //roles是自己设置的一个数组
        return route.meta.roles.some((role: string) => role.indexOf(roles) >= 0)
    }else {
        //如果当前路由对象routes.meta没有roles属性,表示任何人都可以访问路由
        return true;
    }
}
export default router

　　

 

 方式2：

router.addrouters