How to realize vue-admin-template dynamic routing

This article introduces the relevant knowledge of "how to implement vue-admin-template dynamic routing". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Provide data interface for logging in and obtaining user information

In 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'})}

Login interface data

{'code': 200,' data': {'token':' Xmuradmin'}, 'message': "operation succeeded"}

Exit interface data

{'code': 200,' data': 'success',' message': "operation succeeded"}

Detailed interface data

{"code": 200, "data": {"avatar": "https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif"," name ":" Huang Xiaoguo "," roles ": [" editor "]}}

Revamping router/index.js

Import Vue from 'vue'import Router from' vue-router'Vue.use (Router) / * Layout * / import Layout from'@ / layout'// basic routing export const constantRoutes = [{path:'/ login', component: () = > import ('@ / views/login/index'), hidden: true}, {path:'/ 404 routes, component: () = > import ('@ / views/404'), hidden: true} {path:'/', component: Layout, redirect:'/ dashboard', children: [{path: 'dashboard', name:' Dashboard', component: () = > import ('@ / views/dashboard/index'), meta: {title: 'home', icon: 'el-icon-menu'}}]} ] / * * dynamic routing * / export const asyncRoutes = [{path:'/ studentinformation', component: Layout, children: [{path: 'index', component: () = > import (' @ / views/studentinformation/index'), meta: {title: 'student information', icon: 'el-icon-s-check'}}]} {path:'/ lecturerinformation', component: Layout, children: [{path: 'index', component: () = > import (' @ / views/lecturerinformation/index'), meta: {title: 'instructor Information', icon: 'el-icon-s-custom', roles: [' editor']}]}, {path:'/ coursemanage', component: Layout Meta: {roles: ['admin']}, children: [{path:' index', component: () = > import ('@ / views/coursemanage/index'), meta: {title: 'course Management', icon: 'el-icon-s-platform'}}]}, / / 404 pages must be placed on the last page {path:' *' Redirect:'/ 404mm, hidden: true}] const createRouter = () = > newRouter ({/ / mode: 'history', / / require service support scrollBehavior: () = > ({y: 0}), routes: constantRoutes}) const router = createRouter () / / Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465export function resetRouter () {const newRouter = createRouter () router.matcher = newRouter.matcher / / reset router} export default router

Write dynamically displayed routes in asyncRoutes and add roles, such as meta: {roles: ['admin']}

Add permission.js under the store/modulds directory

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}

Modify 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 ('validation failed) Please log in')} 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}

Add roles: [] Save permission list, add the following

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', []).})}}

Add roles to store/getters.js

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, / / add roles roles: state = > state.user.roles, / / dynamic routing permission_routes: state = > state.permission.routes,} export default getters

Add permission to 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'// add permissionimport permission from'. / modules/permission'Vue.use (Vuex) const store = new Vuex.Store ({modules: {app, settings, user, / / add permission permission}, getters}) export default store

Finally, modify the permission.js in the root directory

Import router, {constantRoutes} from'. / router'import store from'. / store'import {Message} from 'element-ui'import NProgress from' nprogress' / / progress barimport 'nprogress/nprogress.css' / / progress bar styleimport {getToken} from' @ / utils/auth' / / get token from cookieimport getPageTitle from'@ / utils/get-page-title'NProgress.configure ({showSpinner: false}) / / NProgress Configurationconst whiteList = ['/ login'] / / no redirect whitelistrouter.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 an 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 tore-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 ()})

Bind data to the nav navigation bar

In layout/components/sidebar/index.vue

... mapGetters ([/ / add permission_routes' permission_routes', 'sidebar'] for dynamic routing)

The full code is as follows:

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 ([/ / dynamic routing adds 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},} "how to implement vue-admin-template dynamic routing" ends here. Thank you for your reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!