菜单权限的控制

菜单权限的控制

提示：这里是基于潘佳辰后台管理系统模板中菜单权限的控制，用户有权限显示菜单，用户没有权限则不显示菜单，用户登录后，根据token获取的用户信息中包含有routes。
这个routes数组中的字符串和路由中的name相同，也就是唯一标识，通过这个唯一标识进行权限的控制。

---

提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档

---

一、定义并注册路由组件

首先就是在pages中定义路由组件，然后在router路由器中注册路由，即上面的图片，这样我们的路由组件就准备完成了。

二、修改store中的配置

1.修改state

在state中，添加其他的属性

import { resetRouter, constantRoutes, allAsyncRoutes, anyRoute } from '@/router'
import router from '@/router'
import cloneDeep from 'lodash/cloneDeep'

const getDefaultState = () => {
    return {
        token: getToken(),
        name: '',
        avatar: '',
        buttons: [],
        roles: [],
        routes: [], //已经匹配好，用于显示的所有的路由
        asyncRoutes: [], //根据权限信息，匹配好的路由对象
    }
}
const state = getDefaultState()

buttons，roles，routes是后台返回来的
asyncRoutes是我们通过函数，根据返回来的routes和所有的allAsyncRoutes路由匹配筛选出来的异步路由

2.定义过滤函数

// 过滤路由
// 第一个参数，allAsyncRoutes是router中所有的异步路由,
// 第二个参数，routeNames是用户信息匹配的routes字符串数组
function filterAsyncRoutes(allAsyncRoutes, routeNames) {
    // 最终返回的是根据权限信息已经匹配好的路由
    return allAsyncRoutes.filter((item) => {
        // 匹配item.name在不在routeNames里面
        if (routeNames.indexOf(item.name) !== -1) {
            if (item.children && item.children.length) {
                // 递归遍历二级路由
                item.children = filterAsyncRoutes(item.children, routeNames)
            }
            return true
        }
    })
}

3.写mutations

  SET_USERINFO(state, userInfo) {
        state.name = userInfo.name
        state.avatar = userInfo.avatar
        state.buttons = userInfo.buttons
        state.roles = userInfo.roles
    },
    SET_ROUTES(state, asyncRoutes) {
        state.asyncRoutes = asyncRoutes
        state.routes = constantRoutes.concat([...asyncRoutes], anyRoute) //用于最后菜单显示的
        router.addRoutes([...asyncRoutes], anyRoute) //动态添加路由
    }

更改actions

    getInfo({ commit, state }) {
        return new Promise((resolve, reject) => {
            getInfo(state.token).then(response => {
                const { data } = response

                if (!data) {
                    return reject('Verification failed, please Login again.')
                }

                const { name, avatar } = data

                /*  commit('SET_NAME', name)
                 commit('SET_AVATAR', avatar) */
                commit('SET_USERINFO', data)
                commit('SET_ROUTES',
                //这里调用函数，返回的是匹配成功的路由
                filterAsyncRoutes(cloneDeep(allAsyncRoutes), data.routes))

                resolve(data)
            }).catch(error => {
                reject(error)
            })
        })
    },

更改routes引用

layout/components/sidebar/index.vue中的
修改成自己store中最后添加的routes，不修改的话，一直用的是$router中最原始的路由