爬坑日记--------vue的权限控制（vuex）

1、Vuex简单介绍（详细请见：点击打开链接）

Vuex是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式储存管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

项目结构如下：

1. 应用层级的状态应该集中到单个store对象中
2. 提交 mutation 是更改状态的唯一方法，并且这个过程是同步的
3. 异步逻辑应该封装到 action 里

2、实际项目中的应用（主要代码，后续会将项目上传）

• store.js

import Vuefrom'vue'import Vuexfrom'vuex'import gettersfrom'./getters'import appfrom'./modules/app';import userfrom'./modules/user';import permissionfrom'./modules/permission';Vue.use(Vuex)const store =newVuex.Store({modules: {app,user,permission},getters});export defaultstore

• getters.js

const getters = {sidebar: state=>state.app.sidebar,visitedViews: state => state.app.visitedViews,avatar: state=>state.user.avatar,name: state=>state.user.name,introduction: state => state.user.introduction,status: state=>state.user.status,roles: state=>state.user.roles,menus: state=>state.user.menus,elements: state=>state.user.elements,setting: state=>state.user.setting,permission_routers: state => state.permission.routers, // 实际用户所拥有的菜单（router）addRouters: state=>state.permission.addRouters,permissionMenus: state => state.user.permissionMenus};export defaultgetters

• permission.js

import {constantRouterMap, asyncRouterMap } from '../../routes'import { fethchAll }from'api/menu/index'/*** 通过authority判断是否与当前用户权限匹配* @param{*}menus* @param{*}route*/function hasPermission(menus,route){if(route.authority){if(menus[route.authority] !==undefined) {return menus[route.authority];}else{return false;}}else{return true;}}/*** 递归过滤异步路由表，返回符合用户角色权限的路由表* @param{*}asyncRouterMap* @param{*}menus* @param{*}menuDatas*/function filterAsyncRouter(asyncRouterMap,menus,menuDatas){const accessedRouters =asyncRouterMap.filter(route=> {if(hasPermission(menus,route)){route.name =menuDatas[route.authority].title;route.icon =menuDatas[route.authority].icon;if(route.children &&route.children.length){route.children =filterAsyncRouter(route.children,menus,menuDatas);}return true;}return false;})return accessedRouters;}const permission = {state: {routers: constantRouterMap,addRouters: []},mutations: {SET_ROUTERS: (state,routers)=> {state.addRouters =routersstate.routers =constantRouterMap.concat(routers)}},actions: {GenerateRoutes({commit}, menus) {return newPromise(resolve=> {fethchAll().then(response=> {const data =response.data;const menuDatas = {};for(leti =0;i < data.length;i++) {menuDatas[data[i].code] =data[i];}const accessedRouters =filterAsyncRouter(asyncRouterMap,menus,menuDatas);commit('SET_ROUTERS',accessedRouters);resolve();});})}}}export defaultpermission;

• main.js

store.dispatch() 方法： 调用的store模块中action定义的方法。

router.addRoutes(store.getters.addRouters)方法：添加用户可访问的路由

router.beforeEach((to,from,next)=> {NProgress.start();// 开启Progress// if (getToken()) { // 判断是否有tokenif (to.path ==='/api') {next({ path: '/' });} else {if (store.getters.menus ===undefined) {// 判断当前用户是否已拉取完user_info信息store.dispatch('GetInfo').then(data=> {// 拉取用户所拥有的菜单const info = data.data;const menus = {};for (leti =0;i < info.menus.length;i++) {menus[info.menus[i].code] =true;}store.dispatch('GenerateRoutes',menus).then(()=> { // 生成可访问的路由表router.addRoutes(store.getters.addRouters)// 动态添加可访问路由表next(to.path);// hack方法 确保addRoutes已完成})}).catch(()=> {store.dispatch('FedLogOut').then(()=> {next({ path: '/api' });})})} else {next();}}});

• vue 加载用户拥有 routes 路由

<!--导航菜单--><el-menu:default-active="$route.path"id="lastclass"class="el-menu-vertical-demo"router>  <templatev-for="(item,index) in permission_routers"v-if="!item.hidden">     <el-submenu:index="index+''"v-if="!item.leaf">        <templateslot="title"><i:class="item.iconCls"></i>{{item.name}}</template>           <el-menu-itemv-for="childinitem.children":index="child.path":key="child.path"v-if="!child.hidden">{{child.name}}</el-menu-item>     </el-submenu>     <el-menu-itemv-if="item.leaf&&item.children.length>0":index="item.children[0].path"><i:class="item.iconCls"></i>{{item.children[0].name}}</el-menu-item>   </template> </el-menu><script>    import { mapGetters } from 'vuex';    export default {        computed: {...mapGetters(['permission_routers' ])}    }</script>