此案例主要实现了一个功能是，在vue实例首次运行时，在加载了login和404两个路由规则，登录成功后，根据登录用户角色权限获取该角色相应菜单权限，生成新的路由规则添加进去。
做过后台管理系统都一定做过这个功能，在对菜单权限进行粗粒度权限控制的时候，通过角色获取菜单后，异步生成菜单，所以一开始拿到需求的时候，我也以为这和平常的没什么不同，不过做起来就发现了很多问题，
1.vue-router的实例，在new vue实例的时候，就加载了，且必须加载，这个时候，登录路由一定要加载，可是这个时候没有登录，无法确定权限
2.路由规则与菜单的同步
解决思路演化，菜单和路由同步，肯定是采用了vuex，一开始的思路的是，在一开始，就把所有的路由规则加载，然后在登录的时候，取得权限路由，对比两个路由，通过修改修改一个权限字段来隐藏菜单，如果在后台页面添加了新菜单规则，路由是按模块加载的不同的文件，这时对路由的文件进行新的读写，虽然可以解决问题，但是如果手动在浏览器地址上路由，依然可以访问，所以在路由的全局钩子上还要做拦截。
这个解决方案虽然解决，但是显的比较复杂，于是就想需找新的方法，重新浏览官方api，发现在2.2.0以后，官方新增了api，addRoutes，专门针对服务端渲染路由，那么这下问题就比较简单了，下面列出实现代码。以下代码不能直接复用，需要根据实际情况修改，只是提供思路
app.js
let permission = JSON.parse(window.sessionStorage.getItem('permission')) if (permission) { store.commit(ADD_MENU, permission) router.addRoutes(store.state.menu.items) } router.beforeEach((route, redirect, next) => { if (state.app.device.isMobile && state.app.sidebar.opened) { store.commit(TOGGLE_SIDEBAR, false) } if (route.path === '/login') { window.sessionStorage.removeItem('user') window.sessionStorage.removeItem('permission') store.commit(ADD_MENU, []) } let user = JSON.parse(window.sessionStorage.getItem('user')) if (!user && route.path !== '/login') { next({ path: '/login' }) } else { if (route.name) { next() } else { next({ path: '/nofound' }) } } }) 登录的组件login.vue
<template> <el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-position="left" label-width="0px" class="demo-ruleForm login-container"> <h3 class="title">系统登录</h3> <el-form-item prop="account"> <el-input type="text" v-model="ruleForm2.account" auto-complete="off" placeholder="账号"></el-input> </el-form-item> <el-form-item prop="checkPass"> <el-input type="password" v-model="ruleForm2.checkPass" auto-complete="off" placeholder="密码"></el-input> </el-form-item> <el-checkbox v-model="checked" checked class="remember">记住密码</el-checkbox> <el-form-item style="width:100%;"> <el-button type="primary" style="width:100%;" @click.native.prevent="handleSubmit2" :loading="logining">登录 </el-button> <!--<el-button @click.native.prevent="handleReset2">重置</el-button>--> </el-form-item> </el-form> </template> <script> import NProgress from 'nprogress' import { mapActions, mapGetters } from 'vuex' export default { data () { return { logining: false, ruleForm2: { account: 'admin', checkPass: '123456' }, rules2: { account: [ {required: true, message: '请输入账号', trigger: 'blur'} // { validator: validaePass } ], checkPass: [ {required: true, message: '请输入密码', trigger: 'blur'} // { validator: validaePass2 } ] }, checked: true } }, computed: { ...mapGetters([ 'menuitems', 'isLoadRoutes' // ... ]) }, methods: { handleReset2 () { this.$refs.ruleForm2.resetFields() }, handleSubmit2 (ev) { this.$refs.ruleForm2.validate((valid) => { if (valid) { this.logining = true NProgress.start() let loginParams = {loginName: this.ruleForm2.account, password: this.ruleForm2.checkPass} this.$http.post('/api/privilege/user/login', loginParams).then(resp => { this.logining = false NProgress.done() let {message, data} = resp.data if (message === 'fail') { this.$notify({ title: '错误', message: message, type: 'error' }) } else { window.sessionStorage.setItem('user', JSON.stringify(data.user)) window.sessionStorage.setItem('permission', JSON.stringify(data.permission)) this.addMenu(data.permission) if (!this.isLoadRoutes) { this.$router.addRoutes(this.menuitems) this.loadRoutes() } this.$router.push('/system/office') } }) } else { console.log('error submit!!') return false } }) }, ...mapActions([ 'addMenu', 'loadRoutes' ]) } } </script> <style lang="scss" scoped> .login-container { /*box-shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.06), 0 1px 0px 0 rgba(0, 0, 0, 0.02);*/ -webkit-border-radius: 5px; border-radius: 5px; -moz-border-radius: 5px; background-clip: padding-box; margin-bottom: 20px; background-color: #F9FAFC; margin: 180px auto; border: 2px solid #8492A6; width: 350px; padding: 35px 35px 15px 35px; .title { margin: 0px auto 40px auto; text-align: center; color: #505458; } .remember { margin: 0px 0px 35px 0px; } } </style> 关键点解释
computed: { ...mapGetters([ 'menuitems', 'isLoadRoutes' // ... ]) }, 这里是从vuex取得两个对象，menuitems是菜单对象，isLoadRoutes是用来判断是否是第一次登录，用来排除重复加载路由规则
...mapActions([ 'addMenu', 'loadRoutes' ])
这里是从vuex取得两个方法，一个是添加菜单，一个更改loadRoutes的值
this.$router.addRoutes(this.menuitems)
这是关键api，动态的向router实例中添加路由规则
menu模块的state与mutations
const state = { items: [ ], isLoadRoutes: false } const mutations = { [types.EXPAND_MENU] (state, menuItem) { if (menuItem.index > -1) { if (state.items[menuItem.index] && state.items[menuItem.index].meta) { state.items[menuItem.index].meta.expanded = menuItem.expanded } } else if (menuItem.item && 'expanded' in menuItem.item.meta) { menuItem.item.meta.expanded = menuItem.expanded } }, [types.ADD_MENU] (state, menuItems) { if (menuItems.length === 0) { state.items = [] } else { generateMenuItems(state.items, menuItems) } }, [types.LOAD_ROUTES] (state) { state.isLoadRoutes = !state.isLoadRoutes } } 路由配置文件router.js
import Vue from 'vue' import Router from 'vue-router' import menuModule from 'vuex-store/modules/menu' Vue.use(Router) export default new Router({ mode: 'hash', // Demo is living in GitHub.io, so required! linkActiveClass: 'is-active', scrollBehavior: () => ({ y: 0 }), routes: [ { path: '/login', component: require('../Login.vue'), meta: { expanded: false, show: false }, name: 'Login' }, { path: '/', component: require('../views/Home.vue'), meta: { expanded: false, show: false }, children: [ { path: '/nofound', component: require('../404.vue'), name: 'NOFOUND', meta: {show: false} } ] }, ...generateRoutesFromMenu(menuModule.state.items) ] }) // Menu should have 2 levels. function generateRoutesFromMenu (menu = [], routes = []) { for (let i = 0, l = menu.length; i < l; i++) { let item = menu[i] if (item.path) { routes.push(item) } } return routes } vuex
import Vue from 'vue' import Vuex from 'vuex' import * as actions from './actions' import * as getters from './getters' import menu from './modules/menu' Vue.use(Vuex) const store = new Vuex.Store({ strict: true, // process.env.NODE_ENV !== 'development', actions, getters, modules: { menu }, mutations: { } }) export default store actions
export const addMenu = ({ commit }, menuItems) => { if (menuItems.length > 0) { commit(types.ADD_MENU, menuItems) } } export const loadRoutes = ({ commit }) => { commit(types.LOAD_ROUTES) } getters
const menuitems = state => state.menu.items const isLoadRoutes = state => state.menu.isLoadRoutes export { menuitems, isLoadRoutes } mutations_type.js
export const ADD_MENU = 'ADD_MENU' export const LOAD_ROUTES = 'LOAD_ROUTES'
因为上面的代码不能直接运行，再次梳理一下思路，
1.创建vue实例的时候，将vuex和vue-router加载，这个时候，vue-router只有登录规则和404规则
2.vuex中state管理的状态对象有，菜单对象menuitems，是否加载过路由loadRoutes ，并提供相应的getters与actions当然还有一些其他的，这里没有列举
3.然后在登录组件中，登录成功后，将服务端传回来之后，调用actions更改state.menuitems,并且中间有格式化的过程，这个过程的代码没有贴出来，主要是由于不同的表涉和服务端返回的数据不一样，，
4.然后调用addRoutes和actions更改已经加载过路由的方法
5.然后为了防止用户直接手动按f5刷新页面，这个时候会重新构建vue实例，而又没有重新登录，所以vuex里面的东西会清空，所以将登录后的数据存放在sessionStroage中，在刷新页面，重新构建vue实例的时候，会有判断
6.之后会渲染侧边栏组件，列出菜单，数据就可以根据state.menuitems来就可以了，我这里没有贴我的，实际根据自己的需求来
后面有时间会在github上上传完整代码。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。
新闻热点
疑难解答
