一个普通的vue权限管理方案-菜单权限控制

渲染左侧菜单

javascript"><template><div class="sidebar"><el-menuref="sideMenu"class="sidebar_menu":default-active="activeNav"unique-opened><divclass="sidebar_item"v-for="sidebar in sidebarList":key="sidebar.id"><!-- 有子级 --><el-submenu:index="sidebar.path"v-if="sidebar.children &&sidebar.children.length > 0 &&sidebar.name !== sidebar.children[0].name"><template slot="title"><span>{{ sidebar.meta.title }}</span></template><divv-for="child1 in sidebar.children":key="child1.name"class="sidebar_child"><el-submenu:index="child1.path"v-if="child1.children && child1.children.length > 0"><template slot="title"><span>{{ child1.meta.title }}</span></template><divv-for="child in child1.children":key="child.name"class="sidebar_child"><el-menu-item:index="child.path":disabled="!child.path"@click="handleClickMenu(child1.path, child.path)"><span slot="title">{{ child.name }}</span></el-menu-item></div></el-submenu><!-- 无子级 --><el-menu-itemv-else:index="child1.path":disabled="!child1.path"@click="handleClickMenu(sidebar.path, child1.path)"><span slot="title">{{ child1.name }}</span></el-menu-item></div></el-submenu><!-- 无子级 --><el-menu-itemv-else:index="sidebar.path + '/index'":disabled="!sidebar.path"@click="handleClickMenu(sidebar.path)"><span slot="title">{{ sidebar.name }}</span></el-menu-item></div></el-menu></div>
</template><script>
import { getUserFuncPerm } from '@/api/user'
export default {name: 'SideNavigation',props: {activePath: {type: String,default: '',},},data() {return {defaultActive: '/',}},computed: {sidebarList(){return this.$store.getter.sidebarList},activeNav() {return this.activePath ? this.activePath : this.defaultActive},},mounted() {this.getMenuList()},methods: {// 菜单getMenuList() {//},handleClickMenu(path, subPath) {const p = subPath ? subPath : `${path}/index`this.$router.push(p)this.defaultActive = p},// 跳转刷新handleClickMenuAndRefresh(path, subPath) {const p = subPath ? subPath : `${path}/index`// 先跳转至空白页，再跳转至目标页，实现刷新目标页this.$router.push({path: '/redirect',query: {path: p,},})this.defaultActive = p},},
}
</script>

首先需要渲染左侧菜单
vuex内部会存贮一个变量sidebarList, 这个变量的结构就是类似于权限接口的返回值，是一个层级结构。
如何存储sidebarList呢，
路由跳转之前会经过 router.beforeEach方法

当进入一个路由之前需要判断是否有能力进入

数据准备sidebarList

有一个获取左侧菜单权限的接口,得到数据

javascript">{"data": {"funcPerm": [{"children": [{"id": "10010","name": "日程管理","path": "/schedule/index", // 路由地址"component": "meeting/meetingRoom/index", // 页面地址}],"component": "Layout","id": "10000","meta": {"title": "会议日程"},"name": "会议日程","path": "/index",}]},"errors": [],"msg": "操作成功","status": "0"
}

上图是一个基本的权限接口的返回值

控制权限展示

javascript">import router from "./router";
import store from "./store";
import { Message } from "element-ui";
import NProgress from "nprogress";
import "nprogress/nprogress.css";
NProgress.configure({ showSpinner: false });const whiteList = ['/login'];
router.beforeEach(async (to, from, next) => {NProgress.start();let userInfo = {};const storedUserInfo = localStorage.getItem("userInfo");if (storedUserInfo) {userInfo = JSON.parse(storedUserInfo);}const userId = userInfo ? userInfo.userId : "";// 如果拉取到了登录人信息if (userId) {if (whiteList.includes(to.path)) {next();NProgress.done();} else {// 如果本地已经拉取过路由信息了const routerLength = store.getters.router_length;if (routerLength) {// 这里其实应该需要判断下目标路由是否在权限列表里面next();NProgress.done();} else {try {let accessRoutes = "";const params = {userId: userId,};const res = await store.dispatch("user/getUserFuncPerm", params);accessRoutes = await store.dispatch("permission/generateRouter",res.funcPerm);router.addRoutes(accessRoutes);next({ ...to, replace: true });} catch (error) {Message.error(error || "Has Error");next(`/uim-view/#/login`);NProgress.done();}}}} else {if (whiteList.includes(to.path)) {next();NProgress.done();}// 这里应该还有登出操作}
});router.afterEach(() => {NProgress.done();
});

上面代码中有个whiteList常量，这里是一个白名单，当路由进入白名单里面的的时候，直接渲染页面，保证登录页面一直保持着能登录的权限
当进入非白名单时，判断用户是否登录userId，没有登录进入登录页
如果登录过，则判断是否获取过用户的菜单权限，这里的菜单权限使用的时vuex保存的，router_length代表这用户菜单的长度，如果有值则表示获取过权限，直接进入对应页面。（其实，这里需要做一个权限判断，如果用户手动输入路由，且不在路由权限里，这里有问题）

动态路由

如果我们不写一个全静态的路由，全由后端的权限给的路径拼上路由列表

javascript">accessRoutes = await store.dispatch("permission/generateRouter",res.funcPerm);

上面就是实现此功能的代码

javascript">  generateRouter({ commit }, data = []) {return new Promise(resolve => {let serverRouterMap = []serverRouterMap = dataif (Array.isArray(data) && data.length === 0) {Message({message: '无权限, 请配置权限',type: 'warning',duration: 3 * 1000,})return}try {constantRoutes[0].redirect = data[0].children[0].path} catch (err) {console.log(err)}const createRouter = () =>new Router({scrollBehavior: () => ({y: 0,}),routes: constantRoutes,})router.matcher = createRouter().matcherserverRouterMap.push({ path: '*', redirect: '/404', hidden: true })const asyncRouterMap = filterAsyncRouter(serverRouterMap)commit('SET_ROUTES', asyncRouterMap)resolve(asyncRouterMap)})},

javascript">function filterAsyncRouter(asyncRouterMap) {// 遍历后台传来的路由字符串，转换为组件对象const accessedRouters = asyncRouterMap.filter(route => {if (route.component) {if (route.component === 'Layout') {// Layout组件特殊处理route.component = Layout} else {route.component = _import(route.component)}}if (route.children && route.children.length > 0) {route.children = filterAsyncRouter(route.children)} else {delete route.children}return true})return accessedRouters
}