把全部頁面都放在路由表中,只須要在訪問的時候判斷一下角色權限便可。 vue-router
在構建路由時提供了元信息 meta
配置接口,咱們能夠在元信息中添加路由對應的權限,而後在路由守衛中檢查相關權限,控制其路由跳轉。前端
在 meta
屬性裏,將能訪問該路由的角色添加到 roles
裏。用戶每次登錄後,將用戶的角色返回。而後在訪問頁面時,把路由的 meta
屬性和用戶的角色進行對比,若是用戶的角色在路由的 roles
裏,那就是能訪問,若是不在就拒絕訪問。vue
const myRouter = new VueRouter({
routes: [{
path: '/login',
name: 'login',
meta: {
roles: ['admin', 'user'] },
component: () => import('@/components/Login') },
{
path: '/home',
name: 'home',
meta: {
roles: ['admin'] },
component: () => import('@/views/Home') },
{
path: '/404',
component: () => import('@/components/404')
}]})
//假設經過接口從後臺獲取的用戶角色,能夠存儲在token中const role = 'user'myRouter.beforeEach((to,from,next)=>{
if(to.meta.roles.includes(role)){
next() //放行
}else{
next({path:"/404"}) //跳到404頁面
}})
複製代碼
const myRouter = new VueRouter({
routes: [{
path: '/login',
name: 'login',
meta: {
title: '登陸頁'
icon: 'login' },
component: () => import('@/components/Login') },
{
path: '/home',
name: 'home',
meta: {
title: '首頁'
icon: 'home',
requireAuth: true },
component: () => import('@/views/Home') },
{
path: '/404',
component: () => import('@/components/404') }]})myRouter.beforeEach((to,from,next)=>{
let flag = to.matched.some(record=>record.meta.requireAuth);
if(flag){
next() }else{
next({path:"/404"})
}})
複製代碼
根據用戶權限或者是用戶屬性去動態的添加菜單和路由表,能夠實現對用戶的功能進行定製。 vue-router
提供了 addRoutes()
方法,能夠動態註冊路由,須要注意的是,動態添加路由是在路由表中 push
路由,因爲路由是按順序匹配的,所以須要將諸如404頁面這樣的路由放在動態添加的最後。vue-router
這裏使用matched循環查找不直接使用to.meta的緣由:
當存在子路由的狀況時,首先明確按正常點擊邏輯來講是先走一級路由再進二級路由的,對於權限的判斷也必然是這樣 //to.meta => 會直接搜索子路由的meta,若是一級路由沒有添加requireAuth:true, 則在一級路由頁面也本就應該被攔截沒法進入二級路由頁面了;若是用戶直接篡改url地址欄的話,則能夠進入二級頁面,權限可能會出現問題。則應該給該權限下面的路由都添加標記 //to.matched => matched是一個路由數組,會將全部路由包括子路由的屬性集合起來,因此經過循環判斷查找的方式,只須要給一級路由添加權限標識便可權限他下面的其餘子路由。vuex
// store.js
// 將須要動態註冊的路由提取到vuex中
const dynamicRoutes = [ {
path: '/manage',
name: 'Manage',
meta: { requireAuth: true },
component: () => import('./views/Manage') },
{ path: '/userCenter',
name: 'UserCenter',
meta: { requireAuth: true },
component: () => import('./views/UserCenter') }]
複製代碼
在 vuex
中添加 userRoutes
數組用於存儲用戶的定製菜單。在 setUserInfo
中根據後端返回的菜單生成用戶的路由表。後端
// store.jssetUserInfo (state, userInfo) {
state.userInfo = userInfo state.auth = true
// 獲取到用戶信息的同時將auth標記爲true,固然也能夠直接判斷userInfo
// 生成用戶路由表
state.userRoutes = dynamicRoutes.filter(route => {
return userInfo.menus.some(menu =>
menu.name === route.name)
})
router.addRoutes(state.userRoutes) // 註冊路由
複製代碼
修改菜單渲染數組
// App.vue
<div id="nav">
<router-link to="/">主頁</router-link>
<router-link to="/login">登陸</router-link>
<template v-for="(menu, index) of $store.state.userInfo.menus"> <router-link :to="{ name: menu.name }" :key="index">{{menu.title}}</router-link> </template>
</div>
複製代碼
你學廢了麼?markdown
前端路漫漫其修遠兮,吾將上下而求索,一塊兒加油,學習前端吧!post