此案例主要实现了一个功能是，在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"> <h3>系统登录</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>记住密码</el-checkbox> <el-form-item> <el-button type="primary" @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