vue的路由安全驗證

在傳統的網頁中:

view層是由后端控制的,用戶的請求到達后端的控制器中,只有當安安全全沒有絲毫異常的情況下,后端才會將完成數據的渲染,返回給前端視圖

前后端分離的項目:

view層的切換權,轉交給了前端框架,如vue, 使用路由導航進行不同視圖組件之間的導航, 這時如果不做任何的安全的驗證限制, 其實是有問題的,如果用戶在瀏覽器的地址欄中手動的不同的路由,同樣頁面會發生跳轉的動作, 換句話說,用戶不用登錄就能進入本來是該登錄后才能查看的子頁面

實現思路

目標就是, 控制路由切換,在任何路由跳轉之前都進行權限的驗證,通過驗證,允許路由的跳轉,通不過驗證,將用戶導向登錄頁面

編碼實現

• 在路由器的入口文件中,給每一個路由子組件添加標識,給后續驗證時判斷該路由會不會被攔截使用, 如下,標記登錄的請求是不需要驗證的,去layout頁面的請求需要進行驗證,

就拿登錄來說,路由的跳轉發生在用戶請求登錄,后端驗證用戶的信息是否滿足條件之后, 在這期間完全有時間處理后端傳遞回來的信息,並且將信息持久化在瀏覽器上,比如后端傳遞過來的 token, 那下面在路由跳轉之前只需要驗證有沒有token,或者驗證token的正確性再決定是否進行頁面的跳轉就ok了

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

export const constantRouterMap = [
  {
    path: '/login',
     在這里!!!
    meta: {requireAuth: false},
    component: () => import('@/views/login/index'),
    hidden: true
  },
  {
    path: '/',
    component: Layout,
    redirect: '/dashboard',
    name: 'Dashboard',
    hidden: true,
    children: [{
      path: 'dashboard',
      在這里!!!
      meta: {requireAuth: true},
      component: () => import('@/views/dashboard/index')
    }]
  },

• 在路由跳轉之前做統一的攔截, 自定義permission.js, 並在整個項目中的入口main.js中,引入這個js文件

import router from './router'
import store from './store'
import {Message} from 'element-ui'

router.beforeEach((to, from, next) => {
  if (to.meta.requireAuth) { // 查看請求是否需要認證
    if (store.getters.loginstatus) { // 有權限,繼續往下跳轉
      next();
      return
    }else{
      Message.error("請您先登錄");
      // 不存在role信息就是去登錄頁
      next('/login');
      return
    }
  } else { // 不需要認證的全部直接放行
    next();
    return
  }
});


router.afterEach(() => {
 // todo 
})