路由及导航栏菜单权限

路由及导航栏菜单权限

后端返回的权限数据是在登录的接口里，因此将权限信息存到了本地缓存，然后进行路由筛选。

• 后端返回的权限数据格式如下

  
  
  image.png
  
  
  image.png

路由筛选方法

import {
    getResources,
    getToken
} from '@/libs/util';
import defaultRouter from '@/router/routers';
// 默认路由表NameList (后端权限数据不会返回，因此前端手动加一下)
const defaultNameList = ['login', '_home', 'home', 'error_401', 'error_500', 'error_404']
// 登录后本地缓存的动态路由权限
const authRouterList = getResources() ? JSON.parse(getResources()) : []

// 获取动态路由对象authRouterObj
// 处理默认路由表defaultNameList
// 筛选出按钮权限List   
const authRouterObj = {}
const getAuthRouterObj = (list) => {
    list.forEach(item => {
        // 将非禁用的路由筛选出来，放到默认路由表中。
        if(item.enabled){
            authRouterObj[item.name] = item
            defaultNameList.push(item.name);
        }
        item.btnList = []
        if (item.children && item.children.length > 0) {
            // 筛选出按钮权限List
            item.children.forEach(val => {
                if(val.type === '2' && val.enabled){
                    item.btnList.push(val.name);
                }
            });
            getAuthRouterObj(item.children)
        }
    })
}
// 处理routers权限
const changeRoutersList = (routers) => {
    // 删除默认路由表中没有的路由，对路由进行icon，title，权重，按钮权限的处理编辑。
    for (let i = routers.length - 1; i >= 0; i--) {
        if (!defaultNameList.includes(routers[i].name)) {
            routers.splice(i, 1)
        } else {
            if (!['login', '_home', 'home', 'error_401', 'error_500', 'error_404'].includes(routers[i].name)) {
                routers[i].meta.icon = authRouterObj[routers[i].name].icon
                routers[i].meta.title = authRouterObj[routers[i].name].title
                routers[i].meta.sort = authRouterObj[routers[i].name].sort
                // routers[i].meta.enabled = authRouterObj[routers[i].name].enabled
                routers[i].meta.btnList = authRouterObj[routers[i].name].btnList
            }else(
                routers[i].meta.sort = 0
            )
            if (routers[i].children && routers[i].children.length > 0) {
                changeRoutersList(routers[i].children)
            }
        }
    }
}
// 根据权重排序
const changeRoutersSort = (routers) => {
    routers.sort(function(a, b) {
        return b.meta.sort - a.meta.sort;
    });
    routers.forEach(item => {
        if (item.children && item.children.length > 0) {
            changeRoutersSort(item.children)
        }
    });
}


// 处理路由表权限
export const getRealRouters = (routers, authRouter) => {
    // 登录时走此处
    if (authRouter) {
        getAuthRouterObj(authRouter)
        changeRoutersList(routers)
        changeRoutersSort(routers)
    } else {
       // 页面刷新时走此处，防止有人删除权限缓存从而重置路由表。
       // 判断token的原因是，如果没有此判断，在刚进入登录页面的时候，就会执行处理路由方法，登录后是处理过的空路由。
        if (getToken()) {
            getAuthRouterObj(authRouterList)
            changeRoutersList(routers)
            changeRoutersSort(routers)
        }
    }
}

路由筛选方法执行

• 此方法会在登录后和app.js中执行。在app.js中执行是因为，每次刷新页面后，路由表会重置，因此需要重新执行方法来筛选路由表。
• 另外用户退出时，会清除掉权限缓存

// app.js
import routers from '@/router/routers';
import {
    getRealRouters
} from '@/libs/routers';
// 动态获取路由表
getRealRouters(routers)

// login.vue