您好,登录后才能下订单哦!
本篇内容介绍了“vue-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动态路由怎么实现”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站,小编将为大家输出更多高质量的实用文章!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。