vuex vue-router动态路由
1、permissionRoute.js
import { asyncRouterMap, constantRouterMap } from '@/router'
import Layout from '@/views/layout/Layout'
function importComponent(file) {
return require('@/views/' + file + '.vue').default
}
/**
* 通过meta.role判断是否与当前用户权限匹配
* @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
}
}
/**
* 递归过滤异步路由表，返回符合用户角色权限的路由表
* @param routes asyncRouterMap
* @param roles
*/
function filterAsyncRouter(asyncRouterMap) {
let accessedRouters = asyncRouterMap.filter(route => {
if (route.component) {
if (route.component === 'Layout') {//Layout组件特殊处理
route.component = Layout
} else {
route.component = importComponent(route.component)
}
}
if (route.children && route.children.length) {
route.children = filterAsyncRouter(route.children)
}
return true
})
return accessedRouters
}
const permissionRoute = {
state: {
routes: [],
addRoutes: []
},
mutations: {
SET_ROUTES: (state, routes) => {
state.addRoutes = routes
console.log(constantRouterMap)
state.routes = constantRouterMap.concat(routes)
}
},
actions: {
GenerateRoutes({ commit }, asyncRouterMap) {
return new Promise(resolve => {
let accessedRoutes = []
accessedRoutes = filterAsyncRouter(asyncRouterMap)
commit('SET_ROUTES', accessedRoutes)
resolve(accessedRoutes)
})
}
},
}
export default permissionRoute
2、index.js
import Vue from 'vue'
import Vuex from 'vuex'
import app from './modules/app'
import user from './modules/user'
import independent from './modules/independent'
import tagsView from './modules/tagsView'
import permissionRoute from './modules/permissionRoute'
import getters from './getters'
Vue.use(Vuex)
// const store = new Vuex.Store({
// modules: {
// app,
// user,
// permissionRoute,
// tagsView,
// independent
//
// },
// getters
// })
// https://webpack.js.org/guides/dependency-management/#requirecontext
const modulesFiles = require.context('./modules', true, /\.js$/)
// you do not need `import app from './modules/app'`
// it will auto require all vuex module from modules file
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
// set './app.js' => 'app'
const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
const value = modulesFiles(modulePath)
modules[moduleName] = value.default
return modules
}, {})
const store = new Vuex.Store({
modules,
getters
})
export default store
3、addRoutes
import router from './router'
import store from './store'
import NProgress from 'nprogress' // Progress 进度条
import 'nprogress/nprogress.css'// Progress 进度条样式
import { getToken } from '@/utils/auth' // 验权
import { asyncRouterMap, constantRouterMap } from '@/router'
// permission judge function
function hasPermission(roles, permissionRoles) {
if (roles.indexOf('超级管理员') >= 0) return true // admin permission passed directly
if (!permissionRoles) return true
return roles.some(role => permissionRoles.indexOf(role) >= 0)
}
const whiteList = ['/login','/toPdf'] // 不重定向白名单
router.beforeEach((to, from, next) => {
NProgress.start()
if (sessionStorage.user_id) {
if (to.path === '/login') {
next({ path: '/' })
NProgress.done() // if current page is dashboard will not trigger afterEach hook, so manually handle it
}
else {
if (store.getters.auth_list.length === 0) { // 判断当前用户是否已拉取完权限路由信息
store.dispatch('GetAuthList').then(res => { // 拉取user_info
let auth_list = store.getters.auth_list
store.dispatch('GenerateRoutes', auth_list).then(() => { // 生成可访问的路由表
router.addRoutes(store.getters.routes) // 动态添加可访问路由表
next({ ...to, replace: true })
}).catch(() => {
store.dispatch('FedLogOut').then(() => {
next({ path: '/login' })
})
})
})
}
else {
next()
NProgress.done()
}
}
}
else {
if (whiteList.indexOf(to.path) !== -1) {
next()
}
else {
next(`/login?token=${sessionStorage.token}&redirect=${to.path}`) // 否则全部重定向到登录页
// next(`/login?redirect=${to.path}`) // 否则全部重定向到登录页
NProgress.done()
}
}
})
router.afterEach(() => {
NProgress.done() // 结束Progress
})
// router.beforeEach((to, from, next) => {
// NProgress.start()
// if (getToken()) {
// if (to.path === '/login') {
// next({ path: '/' })
// NProgress.done() // if current page is dashboard will not trigger afterEach hook, so manually handle it
// } else {
// if (store.getters.roles.length === 0) {
// store.dispatch('GetInfo').then(res => { // 拉取用户信息
// next()
// }).catch((err) => {
// store.dispatch('FedLogOut').then(() => {
// Message.error(err || 'Verification failed, please login again')
// next({ path: '/' })
// })
// })
// } else {
// next()
// }
// }
// } else {
// if (whiteList.indexOf(to.path) !== -1) {
// next()
// } else {
// debugger
// next(`/login?redirect=${to.path}`) // 否则全部重定向到登录页
// NProgress.done()
// }
// }
// })
4.main.js
import Vue from 'vue'
Vue.config.devtools = true
import 'normalize.css/normalize.css' // A modern alternative to CSS resets
import ElementUI from 'element-ui'
import 'vue-event-calendar/dist/style.css' //1.1.10之后的版本，css被放在了单独的文件中，方便替换
import vueEventCalendar from 'vue-event-calendar'
Vue.use(vueEventCalendar, {locale: 'en'}) //可以设置语言，支持中文和英文
import 'element-ui/lib/theme-chalk/index.css'
// import enLocale from 'element-ui/lib/locale/lang/en' // lang i18n
import zhLocale from 'element-ui/lib/locale/lang/zh-CN' // lang i18n
import '@/styles/index.scss' // global css
import '@/assets/iconfont/iconfont.css'
import App from './App'
import store from './store'
import router from './router'
import '@/icons' // icon
import '@/permission' // permission control
import * as filters from '../src/filters' // global filters
import domin from '@/utils/MyCommon'
import axios from 'axios'
import promise from 'es6-promise'
import echarts from 'echarts'
// 活动日历组件
//引入echarts
Vue.prototype.$echarts = echarts
//引入组件
promise.polyfill()
//兼容ie浏览器
Vue.prototype.$domin = domin
Vue.prototype.$axios = axios
Vue.use(ElementUI, { zhLocale })
Vue.config.productionTip = false
// register global utility filters.
Object.keys(filters).forEach(key => {
Vue.filter(key, filters[key])
})
new Vue({
el: '#app',
router,
store,
render: h => h(App)
})