先定義好路由,包括常頁面路由和需要權限的路由數組
import Vue from 'vue'
import Router from 'vue-router'
Vue. use ( Router)
import Layout from '@/layout'
export const StaticRouterMap = [
{
path: '/login' ,
name: '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: 'Home' ,
component: ( ) => import ( '@/views/dashboard/index' ) ,
meta: { title: '首頁' , icon: 'dashboard' }
} ]
}
]
export const AsyncRouterMap = [ ]
const createRouter = ( ) =>
new Router ( {
scrollBehavior: ( ) => ( { y: 0 } ) ,
routes: StaticRouterMap
} )
const router = createRouter ( )
export function resetRouter ( ) {
const newRouter = createRouter ( )
router. matcher = newRouter. matcher
}
export default router
第二步和後臺溝通返回的數據結構樣式
第三步解析後臺數據
export function addRouter ( routerlist) {
const router = [ ]
try {
routerlist. forEach ( e => {
if ( e. path !== 'button' ) {
let e_new = {
path: e. redirect,
name: e. path. split ( '/' ) [ e. path. split ( '/' ) . length - 1 ] ,
redirect: e. path,
component: ( ) => e. path === 'layout' ? import ( '@/layout' ) : import ( '@/layout' )
}
if ( e. children) {
const children = addRouterchild ( e. children)
e_new = { ... e_new, children: children }
}
if ( e. path) {
e_new = { ... e_new, redirect: e. path }
}
if ( e. path) {
e_new = { ... e_new, alwaysShow: true }
}
e_new = { ... e_new, meta: { title: e. title } }
router. push ( e_new)
}
} )
} catch ( error ) {
console. error ( error)
return [ ]
}
return router
}
export function addRouterchild ( routerlist) {
const router = [ ]
try {
routerlist. forEach ( e => {
if ( e. path !== 'button' ) {
let e_new = {
path: e. redirect,
name: e. path. split ( '/' ) [ e. path. split ( '/' ) . length - 1 ] ,
component: ( resolve) => require ( [ `@/views ${ e. path} ` ] , resolve)
}
e_new = { ... e_new, meta: { title: e. title } }
router. push ( e_new)
}
} )
} catch ( error ) {
console. error ( error)
return [ ]
}
return router
}
第四步在permission.js文件對每次的刷新做判斷
import router from './router'
import store from './store'
import user from './store/modules/user'
import { getToken, removeToken } from './utils/auth'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
import { Message } from 'element-ui'
import Cookies from 'js-cookie'
import { addRouter } from './utils/addRouter'
import request from '@/utils/request'
const whiteList = [ '/login' ]
router. beforeEach ( ( to, from , next) => {
NProgress. start ( )
if ( Cookies. get ( 'Authorization' ) ) {
if ( to. path !== '/login' ) {
if ( user. state. init) {
next ( )
} else {
gotoRouter ( to, next)
}
} else {
Message ( { message: '您已經登錄' , type: 'info' } )
next ( '/' )
}
} else {
if ( whiteList. indexOf ( to. path) !== - 1 ) {
next ( )
} else {
if ( to. path !== '/login' ) {
next ( '/login' )
} else {
next ( )
}
}
}
} )
router. afterEach ( ( to, from ) => {
NProgress. done ( )
} )
function getRouter ( ) {
return request ( {
url: '/myLoginForm?username=' + 'choshim ' + '&password=' + '123456' ,
method: 'post'
} )
}
function gotoRouter ( to, next) {
getRouter ( )
. then ( res => {
const asyncRouter = addRouter ( res. menuList)
return asyncRouter
} )
. then ( asyncRouter => {
asyncRouter. push ( {
path: '*' ,
redirect: '/404' ,
hidden: true
} )
router. addRoutes ( asyncRouter)
console. log ( asyncRouter, '拼接後' )
store. dispatch ( 'user/setRouterList' , asyncRouter)
store. commit ( 'user/set_init' , true )
next ( { ... to, replace: true } )
} )
. catch ( e => {
console. log ( e)
removeToken ( )
} )
}
第五步在登錄接口進行路由拼接
import { login, logout } from '@/api/user'
import Cookies from 'js-cookie'
import { getToken, setToken, removeToken } from '@/utils/auth'
import { resetRouter } from '@/router'
import { StaticRouterMap } from '@/router/index'
import md5 from 'js-md5'
const getDefaultState = ( ) => {
return {
token: getToken ( ) ,
name: '' ,
avatar: '' ,
roles: [ ] ,
init: false ,
routerList: [ ]
}
}
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
} ,
set_router: ( state, RouterList) => {
console. log ( RouterList, '==============RouterList2222==========' )
state. routerList = RouterList
} ,
set_init: ( state, status) => {
console. log ( status, '2222222222222222' )
state. init = status
}
}
const actions = {
login ( { commit } , userInfo) {
const { username, password } = userInfo
return new Promise ( ( resolve, reject) => {
login ( { username: username. trim ( ) , password: md5 ( password) , rememberMe: true } ) . then ( response => {
const data = response
commit ( 'SET_TOKEN' , data. token)
setToken ( data. token)
commit ( 'SET_NAME' , data. userInfo. userName)
Cookies. set ( 'userInfo' , data. userInfo)
resolve ( )
} ) . catch ( error => {
reject ( error)
} )
} )
} ,
setRouterList ( { commit } , routerList) {
console. log ( StaticRouterMap. concat ( routerList) , '=============routerList=================' )
commit ( 'set_router' , StaticRouterMap. concat ( routerList) )
} ,
setroles ( { commit } , roleList) {
commit ( 'SET_ROLES' , roleList)
} ,
logout ( { commit, state } , userInfo) {
return new Promise ( ( resolve, reject) => {
logout ( userInfo) . then ( ( ) => {
removeToken ( )
resetRouter ( )
commit ( 'set_init' , false )
commit ( 'RESET_STATE' )
resolve ( )
} ) . catch ( error => {
reject ( error)
} )
} )
} ,
resetToken ( { commit } ) {
return new Promise ( resolve => {
removeToken ( )
commit ( 'RESET_STATE' )
resolve ( )
} )
}
}
export default {
namespaced: true ,
state,
mutations,
actions
}
需要把拼接好的路由導出
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,
routerList: state => state. user. routerList
}
export default getters
最後的效果圖:
歡迎去我的github Star
點讚我的github