1、后端接口返回数据格式,前端主要用到了以下的属性
2、在src\store\modules下创建permission.js用于调用后端接口获取权限数据(第1步获取到的数据)
封装好的路由数据要跟src\router\index.js里面的格式一样。
src\store\modules\permission.js
import router, {
constantRoutes
} from '@/router'
import {
getPermission
} from '@/api/user'
import Layout from '@/layout' // Layout 是架构组件,不在后台返回,在文件里单独引入
export function getRouter(permission, level) {
if (level == 1) { //一级菜单Layout
return {
path: permission.path,
component: Layout,
children: [{
path: '',
component: (resolve) => require([`@/views/${permission.component}`], resolve),
meta: {
title: permission.name,
icon: permission.icon
},
}],
}
} else { //子菜单
return {
path: permission.path,
component: (resolve) => require([`@/views/${permission.component}`], resolve),
meta: {
title: permission.name,
icon: permission.icon
},
}
}
}
export function initRoute(permission, level) { //封装路由
if (permission.children && permission.children.length > 0) { //如果存在子节点
let route = {
path: permission.path,
component: Layout,
meta: {
title: permission.name,
icon: permission.icon
},
children: []
}
permission.children.forEach(child => { //递归封装子节点
route.children.push(initRoute(child, child.level))
})
return route
} else { //不存在子节点直接返回
return getRouter(permission, level)
}
}
export function filterAsyncRoutes(routes) {
const accessedRoutes = []
routes.forEach(permission => {
let routeNode = initRoute(permission, permission.level)
accessedRoutes.push(routeNode); //push一个个封装好的路由数据
})
return accessedRoutes //返回全部的路由数据
}
const state = {
routes: [],
addRoutes: []
}
const mutations = {
SET_ROUTES: (state, routes) => {
state.addRoutes = routes
state.routes = constantRoutes.concat(routes) //将新路由数据和无权限数据合并
}
}
const actions = {
generateRoutes({
commit
}, token) {
return new Promise(resolve => {
//传入token通过token获取后端权限信息
getPermission(token).then(response => {
let accessedRoutes
accessedRoutes = filterAsyncRoutes(response.result) //全部的路由数据
commit('SET_ROUTES', accessedRoutes) //存入VueX
resolve(accessedRoutes) //返回用于addRoutes
})
})
}
}
export default {
namespaced: true,
state,
mutations,
actions
}
3、在路由守卫里获取权限数据并渲染侧边栏菜单
src\permission.js(路由守卫)
死循环问题:next()和 next(to.path)的区别
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: '/index'
})
NProgress.done()
} else {
const hasGetUserInfo = store.getters.name
if (hasGetUserInfo) {
if (to.matched.length === 0) {
next('/404') // 判断此跳转路由的来源路由是否存在,存在的情况跳转到来源路由,否则跳转到404页面
}
next() // 如果存在用户直接跳转
} else {
try {
// get user info
await store.dispatch('user/getInfo')
// 获取路由数据
const accessedRoutes = await store
.dispatch(
'permission/generateRoutes',
hasToken
)
router.addRoutes(accessedRoutes) // 将路由数据加入router
next(to.path) // 跳转目标路径
} 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()
// debugger
}
}
}
} 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()
})
4、到这里路由数据已经加入router了
5、侧边栏渲染路由菜单第2步的
commit('SET_ROUTES', accessedRoutes)
将路由数据存入了VueX,现在要通过存储是数据渲染侧边菜单栏。
src\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'
import permission from './modules/permission'
Vue.use(Vuex)
const store = new Vuex.Store({
modules: {
app,
settings,
user,
permission //VueX permission模块
},
getters
})
export default store
src\store\getters.js
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,
permission: state => state.user.permission,
routes: state => state.permission.routes, //路由数据(存储位置随意,能取到就行)
}
export default getters
6、将存在VueX的路由数据取出渲染菜单
return this.$store.getters.routes
src\layout\components\Sidebar\index.vue
<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"
/>
</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(["sidebar"]),
routes() {
//---------------------------------------------------------------------------------------
return this.$store.getters.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>
最后注释掉(删掉)静态的路由,看看效果。
src\router\index.js
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
/**
* Note: sub-menu only appear when route children.length >= 1
* Detail see: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html
*
* hidden: true if set true, item will not show in the sidebar(default is false)
* alwaysShow: true if set true, will always show the root menu
* if not set alwaysShow, when item has more than one children route,
* it will becomes nested mode, otherwise not show the root menu
* redirect: noRedirect if set noRedirect will no redirect in the breadcrumb
* name:'router-name' the name is used by <keep-alive> (must set!!!)
* meta : {
roles: ['admin','editor'] control the page roles (you can set multiple roles)
title: 'title' the name show in sidebar and breadcrumb (recommend set)
icon: 'svg-name'/'el-icon-x' the icon show in the sidebar
breadcrumb: false if set false, the item will hidden in breadcrumb(default is true)
activeMenu: '/example/list' if set path, the sidebar will highlight the path you set
}
*/
/**
* constantRoutes
* a base page that does not have permission requirements
* all roles can be accessed
*/
export const constantRoutes = [{ //留下无权限的路由
path: '/login',
component: () => import('@/views/login/index'),
hidden: true
},
{
path: '/404',
component: () => import('@/views/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
success!
水平有限,有问题欢迎指出。