vue-router+vuex addRoutes实现路由动态加载及菜单动态加载
此案例主要实现了一个功能是,在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上上传完整代码。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: 微信小程序选择图片和放大预览图片功能
下一篇: 五步轻松实现zTree的使用