【前端】Vue 路由权限控制

。内部具体怎么

运作的呢

要实现动态添加路由，即只有有权限的路由才会注 册到

Vue

实例中，核

心是

的

addRoutes

和导航钩子

beforeEach

两个方法

大体思 路为，在

beforeEach

方法中

(

即每次路由跳转之前做判断

)

，如果

已经加载了路由表，则把路由表注册到实例中，如果没有，则从后端拉取

路由表注册到实例中。那为什么不在登录的时候加载一次就可以了呢？这

是因为 如果只是登录的时候加载一次，网页刷新的时候注册的路由表会丢

失，所以我们统一在< /p>

beforeEach

这个钩子中去实现

// ,

此文件在

< br>

中直接导入即可，这边的思路是仿照的

element- admin

import router from

'./router'

import store from

'./store'

import NProgress from

'nprogress'

// progress bar

import

'nprogress/'

// progress bar style

import Cookies from

'js-cookie'

import screenfull from

'screenfull'

Each(async (to, from, next) => {

const token = (

'token'

)

()

if

(token) {

//

如果已经处于登录状态，跳到登录页重定向到首页

if

( ===

'/login'

) {

next({ path:

'/'

})

()

}

else

{

if

(!ized) {

try {

tes(await ch(

'setAccessRoutes'

))

ch(

'setAllDict'

)

next({ ...to, replace:

true

})

} catch (e) {

(

'token'

)

(

'userInfo'

)

next({ path:

'/login'

})

()

}

}

else

{

next()

//

全屏参数判断该页面是否全屏

if

(!led)

return

if

( && reen) {

t().catch(() => null)

}

else

{

if

(screen) {

()

}

}

}

}

}

else

{

next( !==

'/login'

? { path:

'/login'

} :

true

)

}

})

ach(() => {

()

})

由于路由是动态注册的，所以项目的初始路由就会很简洁，只要提供基础

的路由 ，其他路由都是从服务器返回之后动态注册进来的

//

import Vue from

'vue'

import Router from

'vue-router'

import Login from

'modules/Login'

import NoPermission from

'modules/NoPermission'

(Router)

// Fixed NavigationDuplicated Problem

const originalPush =

=

function

push(location, onComplete, onAbort) {

if

(onComplete || onAbort)

return

(this, location, onCompl

ete, onAbort)

return

(this, location).catch(err => err)

}

const createRouter = () =>

new Router({

mode:

'history'

,

scrollBehavior: () => ({ y: 0 }),

routes: [

{

path:

'/'

,

redirect:

'/platform'

},

{

path:

'/noPermission'

,

component: NoPermission

},

{

path:

'/login'

,

component: Login

}

]

})

const router = createRouter()

export

function

resetRouter

() {

const newRouter = createRouter()

r = r // reset router

}

export

default router

webpack

之前不支持动态编译 ，所以很多项目都在路由表维护了一份映射表如下：

const routerMap = {

user: () => import(

'/views/user'

),

role: () => import(

'/views/role'

),

...

}

我觉得这样很不

nice

vue-cli

集成的

webpack

已经可以支持

动态导入啦，因此可以把 所有的路由信息全部放到数据库里面配置，前端

不在需要维护一份

router

的映射关系表啦，如果你是老版的

CLI

，可以

使用

dynamic- import

我们再来看看下面这个神奇的文件，也可以大致 浏览一下然后看下面的解

释

//

// id:

随便是什么规则，只要唯一就行，这里前端写死

ID

而不是每次导入数据库时候再生成是因

为如果每次入库的时候重新生成会丢失之前的关联 关系

// title:

菜单的标题

// name:

唯一标识

//

type

:

'MD'

代 表模块

(

子系统

),

< br>'MN'

代表菜单，

'BT'

代 表按钮，如果需要控制到按钮权限则需要

配置到

BT

// icon:

菜单的图标

// uri:

菜单的路由地址

// co mponentPath:

该菜单在对应前端项目的路径，在后续的

会看到用法，就是上述说

的不需要在写一份

routerMap

// hidden:

作为菜单 的时候是否在左侧显示，有些菜单比如某个列表的详情页，需要注册到实例

中，但是并不 需要在左侧菜单栏显示

// noCache:

由于项目页面增加了缓存控制，因此该字段用于判断当前页面是否需要缓存

// fullScreen:

有些菜单，进入的时候就是全屏 展示的，例如某些大屏展示页面，通过该字段配

置

// children:

和上述字段一样

[

{

:

,

:

,

:

,

:

,

: [

{

{

:

,

:

系统管理

,

:

,

:

,

:

,

:

,

:

,

: [

{

:

,

:

用户管理

,

:

,

:

,

:

,

:

,

: [

{

:

,

:

新增

,

:

,

:

},

{

:

,

:

编辑

,

:

,

:

},

{

:

,

:

删除

,

:

,

:

},

{

:

,

:

修改密码

,

:

,

:

},

{

:

,

:

选择角色

,

:

,

:

}

]

},

{

:

,

:

角色管理

,

:

,

:

,

:

,

:

,

: [

{

:

,

:

新增

,

:

,

:

},

{

:

,

:

编辑

,

:

,

:

},

{

:

,

:

删除

,

:

,

:

},

{

:

,

:

设置菜单

,

:

,

:

}

]

},

{

:

,

:

资源管理

,

:

,

:

,

:

,

:

,

: [

{

:

,

:

新增

,

:

,

:

},

{

:

,

:

编辑

,

:

,

:

},

{

:

,

:

删除

,

:

,

:

}

]

}

]

},

}