vue-element-template实战（五） 获取后端路由表动态生成权限
主要思路如下：
- 用户登录login获取token
- 拿着token请求用户信息，同时后端返回一个路由表
- 前端解析后动态添加路由表，同时存储到本地localstorage
- 刷新页面或者退出登录或者登录过期等时，会进行相应的判断，重新渲染路由
1、在src/router文件夹下新建_import.js，用于匹配组件，代码如下：
export default file => { return map[file] || null } const map = { 'Layout': () => import('@/layout'), 'table': () => import('@/views/table/index'), 'tree': () => import('@/views/tree/index'), 'form': () => import('@/views/form/index'), 'menu1': () => import('@/views/nested/menu1/index'), 'menu1-1': () => import('@/views/nested/menu1/menu1-1'), 'menu1-2': () => import('@/views/nested/menu1/menu1-2'), 'menu1-2-1': () => import('@/views/nested/menu1/menu1-2/menu1-2-1'), 'menu1-2-2': () => import('@/views/nested/menu1/menu1-2/menu1-2-2'), 'menu1-3': () => import('@/views/nested/menu1/menu1-3'), 'menu2': () => import('@/views/nested/menu2/index') }
2、在src/utils文件夹下新建addRouter.js，用于解析后端返回的路由，具体解析方法和数据形式还是要看项目具体来分析，代码如下：
import _import from '../router/_import'// 获取组件的方法 function addRouter(routerlist) { routerlist.forEach(e => { // 删除无用属性 delete e.id e.component = _import(e.component) // 动态匹配组件 if (e.redirect === '') { delete e.redirect } if (e.name === '') { delete e.name } if (e.icon !== '' && e.title !== '') { // 配置 菜单标题 与 图标 e.meta = { title: e.title, icon: e.icon } } else if (e.icon === '' && e.title !== '') { e.meta = { title: e.title } } delete e.icon delete e.title if (e.children != null) { // 存在子路由就递归 addRouter(e.children) } }) // console.log(routerlist) return routerlist } export { addRouter }
3、修改src/permission.js，动态添加路由
3.1 导入addRouter
import { addRouter } from './utils/addRouter'
3.2 动态添加路由函数，注意404页面要在这最后添加到路由表中，不能放在router默认的路由中，否则刷新页面就会跳转到404
function gotoRouter(to, next) { try { getRouter = addRouter(getRouter) // 解析路由 const newRouters = router.options.routes.concat(getRouter) // 连接获取到的路由 newRouters.push({ path: '*', redirect: '/404', hidden: true }) // 最后添加404页面 console.log('路由：', newRouters) // router.options.routes = newRouters router.addRoutes(newRouters) // 动态添加路由 store.commit('SET_ROUTER', newRouters) // 将路由数据传递给VUEX，做侧边栏菜单渲染工作 next({ to, replace: true }) } catch (error) { localStorage.setItem('login_static', 0) store.dispatch('user/resetToken') Message.error(error || 'Has Error') next(`/login?redirect=${to.path}`) NProgress.done() } }
3.3 请求路由数据函数以及从本地获取路由表函数
function setRouterList(to, next) { store.dispatch('user/getInfo').then(data => { // 请求路由数据 localStorage.setItem('router', JSON.stringify(data.routers)) getRouter = getRouterList('router') // 拿到路由 gotoRouter(to, next) }) }
3.4 修改beforeEach
var getRouter router.beforeEach(async(to, from, next) => { // start progress bar NProgress.start() // set page title document.title = getPageTitle(to.meta.title) // determine whether the user has logged in const hasToken = getToken() const hasLogin = getRouterList('login_static') console.log('hasToken:', hasToken) // 是否已获取token console.log('hasLogin:', hasLogin) // 登录状态 if (hasToken && hasLogin === 1) { if (to.path === '/login') { // if is logged in, redirect to the home page next({ path: '/' }) NProgress.done() } else { const hasGetUserInfo = store.getters.name if (hasGetUserInfo) { next() } else { try { // get user info await store.dispatch('user/getInfo') next() } catch (error) { // remove token and go to login page to re-login await store.dispatch('user/resetToken') Message.error(error || 'Has Error') next(`/login?redirect=${to.path}`) NProgress.done() } } if (!getRouter) { console.log('路由信息不存在') const hasRouterData = getRouterList('router') if (hasRouterData) { console.log('路由信息存在 说明已经请求到路由 直接解析路由信息') getRouter = hasRouterData await gotoRouter(to, next) } else { console.log('localStorage不存在路由信息 需要重新请求路由信息 并解析路由') setRouterList(to, next) } } else { console.log('路由信息存在 直接通过') next() } } } else { /* has no token*/ if (whiteList.indexOf(to.path) !== -1) { // in the free login whitelist, go directly next() } else { // other pages that do not have permission to access are redirected to the login page. next(`/login?redirect=${to.path}`) NProgress.done() } } })
4、把router文件夹中的index.js中的路由删掉，只留默认自带的路由。
export const constantRoutes = [ { path: '/login', component: () => import('@/views/login/index'), hidden: true }, { path: '/404', component: () => import('@/views/404'), hidden: true }, { path: '/', component: Layout, redirect: '/dashboard', children: [{ path: 'dashboard', name: 'Dashboard', component: () => import('@/views/dashboard/index'), meta: { title: 'Dashboard', icon: 'dashboard' } }] } ]
5、修改store文件夹中index.js，添加路由表状态和获取路由表的方法
const store = new Vuex.Store({ state: { routerList: [] // 用于存储路由表 }, mutations: { // 用于获取路由表 SET_ROUTER(state, routerList) { state.routerList = routerList } }, modules: { app, settings, user }, getters })
6、修改store/modules中的user.js，在login时保存登录状态，在logout时清除登录状态以及本地保存的路由表
// user login login({ commit }, userInfo) { const { username, password } = userInfo return new Promise((resolve, reject) => { login({ username: username.trim(), password: password }).then(response => { const { data } = response commit('SET_TOKEN', data.token) setToken(data.token) localStorage.setItem('login_static', 1) // 保存登录状态 resolve() }).catch(error => { reject(error) }) }) },
// user logout logout({ commit, state }) { return new Promise((resolve, reject) => { logout(state.token).then(() => { removeToken() // must remove token first localStorage.removeItem('router') // 删除本地存储的路由表 localStorage.setItem('login_static', 0) // 切换登录状态 resetRouter() commit('RESET_STATE') location.reload() // 刷新页面 以重置getRouter resolve() }).catch(error => { reject(error) }) }) }, // remove token resetToken({ commit }) { return new Promise(resolve => { removeToken() // must remove token first localStorage.removeItem('router') // 删除本地存储的路由表 localStorage.setItem('login_static', 0) // 切换登录状态 commit('RESET_STATE') resolve() }) }
7、修改layout/component/Sliebar中的index.vue
routes() { // return this.$router.options.routes return this.$store.state.routerList // 将VUEX中的路由表挂载 },
8、使用mock模拟下后端返回的路由信息，在getInfo中与用户信息一起返回的
// 模拟路由表 const routerTable = [ { 'id': 1, 'name': 'Example', 'path': '/example', 'component': 'Layout', 'redirect': '/example/table', 'title': 'Example', 'icon': 'example', 'children': [{ 'id': 2, 'name': 'Table', 'path': '/example/table', 'component': 'table', 'title': 'Table', 'icon': 'table' }, { 'id': 3, 'name': 'Tree', 'path': '/example/tree', 'component': 'tree', 'title': 'Tree', 'icon': 'tree' }] }, { 'id': 4, 'path': '/form', 'component': 'Layout', 'children': [{ 'id': 5, 'name': 'Form', 'path': '/form/index', 'component': 'form', 'title': 'Form', 'icon': 'form' }] }, { 'id': 6, 'name': 'Nested', 'path': '/nested', 'component': 'Layout', 'redirect': '/nested/menu1/index', 'title': 'Nested', 'icon': 'nested', 'children': [{ 'id': 7, 'name': 'Menu1', 'path': '/nested/menu1/index', 'component': 'menu1', 'title': 'Menu1', 'children': [{ 'id': 8, 'name': 'Menu1-1', 'path': '/nested/menu1/menu1-1', 'component': 'menu1-1', 'title': 'Menu1-1' }, { 'id': 9, 'name': 'Menu1-2', 'path': '/nested/menu1/menu1-2', 'component': 'menu1-2', 'title': 'Menu1-2', 'children': [{ 'id': 10, 'name': 'Menu1-2-1', 'path': '/nested/menu1/menu1-2/menu1-2-1', 'component': 'menu1-2-1', 'title': 'Menu1-2-1' }, { 'id': 11, 'name': 'Menu1-2-2', 'path': '/nested/menu1/menu1-2/menu1-2-2', 'component': 'menu1-2-2', 'title': 'Menu1-2-2' }] }, { 'id': 12, 'name': 'Menu1-3', 'path': '/nested/menu1/menu1-3', 'component': 'menu1-3', 'title': 'Menu1-3' }] }, { 'id': 13, 'name': 'Menu2', 'path': '/nested/menu2/index', 'component': 'menu2', 'title': 'Menu2' }], }, { 'id': 14, 'path': 'external-link', 'component': 'Layout', 'children': [{ 'path': 'https://panjiachen.github.io/vue-element-admin-site/#/', 'title': 'External Link', 'icon': 'link' }] } ] const users = { 'admin-token': { roles: ['admin'], introduction: 'I am a super administrator', avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif', name: 'Super Admin', routers: routerTable }, 'editor-token': { roles: ['editor'], introduction: 'I am an editor', avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif', name: 'Normal Editor', routers: [ routerTable[0] ] } }
至此已完成，亲测可行，第一次登陆会出现找不到路由，再次登陆后正常，待解决。
