VUE路由許可權驗證

# vue 路由許可權驗證

> 因為路由是前端配的，本質上是一個頁面，此不可能通過後台來做攔截器。

在一個應用中，有用戶無限制的訪問一些頁面，同時，還有一些登錄後才有的許可權。

比如有這樣的路由表

``` javascript

let router = new Router({

routes: [

{

path: /login,

name: login,

component: Login

},

{

path: /desk,

name: desk,

component: Desk,

children: [

{

path: public,

name: public,

component: Public

},

{

path: admin,

name: admin,

component: Admin

}

]

},

{

path: /*,

name: index,

redirect: /desk/public

}

]

});

```

這就路由表即是最簡單的，有無許可權訪問頁面和需要登錄許可權才可以訪問的頁面

可以在路由跳轉前進行判斷，用戶是否有權進行頁面的訪問，這個是由前端來完成。

除此之外，任何前端的限制都可以被突破。因此在調用登錄許可權的頁面介面時，需要後台做介面驗證。

## 前端做的路由攔截

使用`router.beforeEach((to, from, next) => {})`來做驗證

首先給需要許可權的路由加上

```javascript

meta: {

requireAuth: true

}

```

然後

```javascript

router.beforeEach((to, from, next) => {

if (to.meta.requireAuth){

// 來獲取此前設置的requireAuth值

}

})

```

那麼根據什麼來判斷

一般登錄後，後台返回token，前端將此token緩存，如果跳轉路由前讀取token，有值並且在有效期內，可以進行跳轉，如果無效則進行跳轉登錄頁面操作

前端緩存 token的地方，可以是

- vuex

- localStorage

- cookie

## 後台介面的驗證

前端在發送所有介面在`request.header`中添加auth欄位，攜帶koken，後台來判斷是否可以訪問，如果正常則返回數據，否則返回狀態碼401未登錄，前端根據這個狀態碼來進行登錄頁面的跳轉。

因此做這個操作需要進行對前端介面請求進行攔截，下面是axios[示例代碼](https://github.com/Joo-fanChang/vue-router-guard/blob/master/src/axios/axios.js)

## 整體示例代碼

[git](Joo-fanChang/vue-router-guard)

``` bash

# serve with hot reload at localhost:9016

npm run dev

npm run server

```

推薦閱讀：