vue-admin-template 動態路由的實現示例
阿新 • • 發佈:2021-12-14
提供登入與獲取使用者資訊資料介面
在api/user.中
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,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 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'),{ 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',children: [ { path: 'index',component: () => import('@/views/studentinformation/index'),meta: { title: '學生資訊',icon: 'el-icon-s-check' } } ] },{ path: '/lecturerinformation',component: () => import('@/views/lecturerinformation/index'),meta: { title: '講師資訊',icon: 'el-icon-s-custom',roles: ['editor'] } } ] },{ path: '/coursemanage',meta: { roles: ['admin'] },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://.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: '',yTwDZroles: [] } } 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,reject) => { logout(state.token).then(() => { removeToken() // must remove token first resetRouter() commit('RESET_STATE') commit('SET_ROLES',[]) resolve() }).catch(error => { reject(error) }) }) },// remove tokwww.cppcns.comen resetToken({ commit }) { return new Promise(resolve => { removeToken() // must remove token first commit('RESET_STATE') commit('SET_ROLES',[]) resolve() }) } } export default { namespaced: true,actions }
新增roles: [] 儲存許可權列表 ,新增內容如下
const getDefaultState = () => { return { ... roles: [] } } const mutations = { ... SET_ROLES: (state,roles) => { state.roles = roles } } // get user info getInfo({ commit,reject) => { getInfo(state.token).then(response => { ... const {roles,roles) ... }).catch(error => { reject(error) }) }) },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.' // 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()
www.cppcns.com
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> www.cppcns.com <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 動態路由的實現內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們!