vue-admin-template 动态路由的实现示例
作者:晓果博客
本文主要介绍了ue-admin-template动态路由的实现,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
提供登录与获取用户信息数据接口
在api/user.js中
import request from '@/utils/request' const Api = { TakeOut: '/student/students/takeOut/', LoginIn: '/student/students/loginIn/', StudentInfo:'/student/students/studentInfo/', } export function login(parameter) { return request({ url: Api.LoginIn, method: 'get', params: parameter }) } export function getInfo(token) { return request({ url: Api.StudentInfo, method: 'get', params: {'token':token} }) } export function logout() { return request({ url: Api.TakeOut, method: 'get' }) }
登录接口数据
{'code': 200, 'data': {'token': 'X-admin'}, 'message': "操作成功"}
退出接口数据
{'code': 200, 'data': 'success', 'message': "操作成功"}
详情接口数据
{ "code": 200, "data": { "avatar": "https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif", "name": "黄晓果", "roles": [ "editor" ] } }
改造router/index.js
import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) /* Layout */ import Layout from '@/layout' // 基础路由 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: '首页', icon: 'el-icon-menu' } }] }, ] /** * 动态路由 */ export const asyncRoutes = [ { path: '/studentinformation', component: Layout, children: [ { path: 'index', component: () => import('@/views/studentinformation/index'), meta: { title: '学生信息', icon: 'el-icon-s-check' } } ] }, { path: '/lecturerinformation', component: Layout, children: [ { path: 'index', component: () => import('@/views/lecturerinformation/index'), meta: { title: '讲师信息', icon: 'el-icon-s-custom', roles: ['editor'] } } ] }, { path: '/coursemanage', component: Layout, meta: { roles: ['admin'] }, children: [ { path: 'index', component: () => import('@/views/coursemanage/index'), meta: { title: '课程管理', icon: 'el-icon-s-platform'} } ] }, // 404 页面必须放置在最后一个页面 { path: '*', redirect: '/404', hidden: true } ] const createRouter = () => new Router({ // mode: 'history', // require service support scrollBehavior: () => ({ y: 0 }), routes: constantRoutes }) const router = createRouter() // Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465 export function resetRouter() { const newRouter = createRouter() router.matcher = newRouter.matcher // reset router } export default router
将动态显示的路由写在asyncRoutes 中并添加 roles ,例如meta: { roles: [‘admin'] },
在store/modulds目录下添加permission.js
import { asyncRoutes, constantRoutes } from '@/router' /** * Use meta.role to determine if the current user has permission * @param roles * @param route */ function hasPermission(roles, route) { if (route.meta && route.meta.roles) { return roles.some(role => route.meta.roles.includes(role)) } else { return true } } /** * Filter asynchronous routing tables by recursion * @param routes asyncRoutes * @param roles */ export function filterAsyncRoutes(routes, roles) { const res = [] routes.forEach(route => { const tmp = { ...route } if (hasPermission(roles, tmp)) { if (tmp.children) { tmp.children = filterAsyncRoutes(tmp.children, roles) } res.push(tmp) } }) return res } const state = { routes: [], addRoutes: [] } const mutations = { SET_ROUTES: (state, routes) => { state.addRoutes = routes state.routes = constantRoutes.concat(routes) } } const actions = { generateRoutes({ commit }, roles) { return new Promise(resolve => { const accessedRoutes = filterAsyncRoutes(asyncRoutes, roles) commit('SET_ROUTES', accessedRoutes) resolve(accessedRoutes) }) } } export default { namespaced: true, state, mutations, actions }
修改store/modulds/user.js
import { login, logout, getInfo } from '@/api/user' import { getToken, setToken, removeToken } from '@/utils/auth' import { resetRouter } from '@/router' const getDefaultState = () => { return { token: getToken(), name: '', avatar: '', roles: [] } } const state = getDefaultState() const mutations = { RESET_STATE: (state) => { Object.assign(state, getDefaultState()) }, SET_TOKEN: (state, token) => { state.token = token }, SET_NAME: (state, name) => { state.name = name }, SET_AVATAR: (state, avatar) => { state.avatar = avatar }, SET_ROLES: (state, roles) => { state.roles = roles } } const actions = { // 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) resolve() }).catch(error => { reject(error) }) }) }, // get user info getInfo({ commit, state }) { return new Promise((resolve, reject) => { getInfo(state.token).then(response => { const { data } = response if (!data) { return reject('验证失败,请重新登录') } const {roles, name, avatar } = data commit('SET_ROLES', roles) commit('SET_NAME', name) commit('SET_AVATAR', avatar) resolve(data) }).catch(error => { reject(error) }) }) }, // user logout logout({ commit, state }) { return new Promise((resolve, reject) => { logout(state.token).then(() => { removeToken() // must remove token first resetRouter() commit('RESET_STATE') commit('SET_ROLES', []) resolve() }).catch(error => { reject(error) }) }) }, // remove token resetToken({ commit }) { return new Promise(resolve => { removeToken() // must remove token first commit('RESET_STATE') commit('SET_ROLES', []) resolve() }) } } export default { namespaced: true, state, mutations, actions }
添加roles: [] 保存权限列表 ,添加内容如下
const getDefaultState = () => { return { ... roles: [] } } const mutations = { ... SET_ROLES: (state, roles) => { state.roles = roles } } // get user info getInfo({ commit, state }) { return new Promise((resolve, reject) => { getInfo(state.token).then(response => { ... const {roles, name, avatar } = data commit('SET_ROLES', roles) ... }).catch(error => { reject(error) }) }) }, // user logout logout({ commit, state }) { return new Promise((resolve, reject) => { logout(state.token).then(() => { ... commit('SET_ROLES', []) ... }).catch(error => { reject(error) }) }) }, // remove token resetToken({ commit }) { return new Promise(resolve => { ... commit('SET_ROLES', []) ... }) } }
在store/getters.js中添加roles
const getters = { sidebar: state => state.app.sidebar, device: state => state.app.device, token: state => state.user.token, avatar: state => state.user.avatar, name: state => state.user.name, //添加roles roles: state => state.user.roles, //动态路由 permission_routes: state => state.permission.routes, } export default getters
将permission添加到store/index.js中
import Vue from 'vue' import Vuex from 'vuex' import getters from './getters' import app from './modules/app' import settings from './modules/settings' import user from './modules/user' //添加permission import permission from './modules/permission' Vue.use(Vuex) const store = new Vuex.Store({ modules: { app, settings, user, //添加permission permission }, getters }) export default store
最后修改根目录下的permission.js
import router, { constantRoutes } from './router' import store from './store' import { Message } from 'element-ui' import NProgress from 'nprogress' // progress bar import 'nprogress/nprogress.css' // progress bar style import { getToken } from '@/utils/auth' // get token from cookie import getPageTitle from '@/utils/get-page-title' NProgress.configure({ showSpinner: false }) // NProgress Configuration const whiteList = ['/login'] // no redirect whitelist 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() if (hasToken) { if (to.path === '/login') { // if is logged in, redirect to the home page next({ path: '/' }) NProgress.done() } else { const hasRoles = store.getters.roles && store.getters.roles.length > 0 if (hasRoles) { next() } else { try { // get user info // note: roles must be a object array! such as: ['admin'] or ,['developer','editor'] const { roles } = await store.dispatch('user/getInfo') console.log(roles) // generate accessible routes map based on roles const accessRoutes = await store.dispatch('permission/generateRoutes', roles) // dynamically add accessible routes router.options.routes = constantRoutes.concat(accessRoutes) router.addRoutes(accessRoutes) // hack method to ensure that addRoutes is complete // set the replace: true, so the navigation will not leave a history record next({ ...to, replace: true }) } 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() } } } } 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() } } }) router.afterEach(() => { // finish progress bar NProgress.done() })
将数据绑定到nav导航栏上
在layout/components/sidebar/index.vue中
...mapGetters([ // 动态路由 增加permission_routes 'permission_routes', 'sidebar' ]), <!-- 动态路由 --> <sidebar-item v-for="route in permission_routes" :key="route.path" :item="route" :base-path="route.path" />
全部代码如下:
<template> <div :class="{ 'has-logo': showLogo }"> <logo v-if="showLogo" :collapse="isCollapse" /> <el-scrollbar wrap-class="scrollbar-wrapper"> <el-menu :default-active="activeMenu" :collapse="isCollapse" :background-color="variables.menuBg" :text-color="variables.menuText" :unique-opened="false" :active-text-color="variables.menuActiveText" :collapse-transition="false" mode="vertical" > <!-- <sidebar-item v-for="route in routes" :key="route.path" :item="route" :base-path="route.path" /> --> <sidebar-item v-for="route in permission_routes" :key="route.path" :item="route" :base-path="route.path" /> </el-menu> </el-scrollbar> </div> </template> <script> import { mapGetters } from 'vuex' import Logo from './Logo' import SidebarItem from './SidebarItem' import variables from '@/styles/variables.scss' export default { components: { SidebarItem, Logo }, computed: { ...mapGetters([ // 动态路由 增加permission_routes 'permission_routes', 'sidebar', ]), routes() { return this.$router.options.routes }, activeMenu() { const route = this.$route const { meta, path } = route // if set path, the sidebar will highlight the path you set if (meta.activeMenu) { return meta.activeMenu } return path }, showLogo() { return this.$store.state.settings.sidebarLogo }, variables() { return variables }, isCollapse() { return !this.sidebar.opened }, }, } </script>
到此这篇关于vue-admin-template 动态路由的实现的文章就介绍到这了,更多相关vue-admin-template 动态路由的实现内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!