vue-element-template 權限問題
主要三個檔案
一、/src/router/index.js 這個是目錄檔案 直接配置
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: '首頁',
component: () => import('@/views/dashboard/index'),
meta: { title: '首頁', icon: 'dashboard', affix: true}
}]
}
]
export const asyncRoutesMap = [
{
path: '/nested',
component: Layout,
redirect: '/nested/menu1',
alwaysShow: true,
name: '資料維護',
meta: {
title: '資料維護',
icon: 'nested'
},
children: [
{
path: 'material',
component: () => import('@/views/nested/material/materiallist/index'), // Parent router-view
name: '物料主檔',
meta: { title: '物料主檔', icon: 'form', roles: ['admin'] },
},
{
path: 'menu2',
component: () => import('@/views/nested/menu2/index'),
name: '客戶主檔',
meta: { title: '客戶主檔', icon: 'table', roles: ['admin']},
noCache: true,
children: [
{
path: 'menu2-1',
component: () => import('@/views/nested/menu2/menu2-1'),
name: '添加客戶',
meta: {title: '添加客戶', icon: 'table',roles: ['admin']}
},
{
path: 'menu2-2',
component: () => import('@/views/nested/menu2/menu2-1'),
name: '客戶串列',
meta: {title: '客戶串列', icon: 'table'}
}
]
}
]
]
二、/src/permission/permisson.js 主要對目錄進行配置
import { asyncRoutesMap, constantRoutes } from '@/router'
/**
* 通過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
}
}
export function filterAsyncRoutes(routes, roles) {
const res = []
routes.forEach(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 => {
let accessedRoutes
if (roles.includes('admin')) {
accessedRoutes = asyncRoutesMap || []
} else {
accessedRoutes = filterAsyncRoutes(asyncRoutesMap, roles)
}
commit('SET_ROUTES', accessedRoutes)
resolve(accessedRoutes)
})
}
}
export default {
namespaced: true,
state,
mutations,
actions
}
三、/src/permission.js 整個路由跳轉的時候走的邏輯
import router 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 hasGetUserInfo = store.getters.name
if (hasGetUserInfo) {
next()
resetRoute()//i am not sure
} else {
try {
// get user info
await store.dispatch('user/getInfo')
next()
} 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()
})
面臨的問題 就是如何讓權限生效
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/106737.html
標籤：JavaScript