vue中使用router全局守衛實現頁面攔截

時間 2019-11-20

標籤 vue 使用 router 全局守衛實現頁面攔截简体版

原文原文鏈接

1、背景vue

　　在vue項目中使用vue-router作頁面跳轉時，路由的方式有兩種，一種是靜態路由，另外一種是動態路由。而要實現對路由的控制須要使用vuex和router全局守衛進行判斷攔截(安全問題文章最後討論)ios

2、使用場景es6

　　靜態路由的使用場景：在咱們使用靜態路由實現頁面跳轉時，無論咱們是否登陸，當咱們在地址欄修改地址後，頁面會發生跳轉並展現頁面內容（數據並不會被展現出來），這樣的問題顯然是不可以被接受的；vue-router

　　動態路由的使用場景：動態路由無非就是從後端拿到了數據而後在加到router裏面了。假如用戶登陸了，在地址欄修改地址便能直接訪問。因此動態路由並不能起到攔截做用。vuex

3、解決方案axios

　　使用vuex+router.beforeEach()+動態路由實現頁面攔截後端

　　　　頁面刷新時會清楚vuex裏面的值;(防止直接修改地址欄)安全

　　　　router.beforeEach()對跳轉前進行攔截判斷;（對vuex裏面的值進行判斷）ide

　　　　當用戶登陸時請求後臺拿到數據，加載路由.（跳轉頁面）函數

4、實現過程

　　1.首先定義vuex裏面的值，須要定義兩個值：a.登陸狀態信息的值 loginInfo b.存儲動態路由的值 routerList

　　2.router.beforeEach()對路由跳轉前進行控制　

//全局守衛
router.beforeEach((to, from, next)=> {
  let userId = store.state.loginInfo.id;
  //這裏是對登陸後的值進行判斷，也可對token的值進行判斷
    if (userId === '') {
      if (to.meta.requireAuth || to.name == null) {
        next({path: '/'})
      } else {
        next();
      }
    } else {
      //初始化動態路由方法
      initRouter(router, store); 
      next();
    }
  }
);

3.初始化動態路由

在全局守衛對應條件下加載動態路由數據routerList和在登陸成功時存儲登陸成功的信息loginInfo

新建一個xxx.js文件引入axios 建立一個函數並使用export 暴露該方法;

請求成功拿到數據後，把數據形成和routes裏的數據同樣。而後使用 router.addRoutes 添加進去;

index中的默認路由

import axios from 'axios'
export const initRouter = (router,store)=>{
  if (store.state.routerList.length > 0) {
    return;
  }
  axios.get(' URL')
     .then((rest)=>{
      let routerList = [];
      if(rest.data.success){
        let routers = rest.data.body;
        routers.forEach(router=>{
            let {
              path,
              component,
              name,
            } = router
            let routerObj = {
              path:path,
              name:name,
              component(resolve){
                if (component.startsWith("index")) {
                  require(['../components/' + component + '.vue'], resolve)
                }       
                
              },
              meta:{requireAuth:true} //是不是登陸權限控制
            };
            routerList.push(routerObj);
          });
        //add到router中
        router.addRoutes(routerList); 
        //存儲到vuex中
        store.commit('routerList', routerList); 

      }else{
         console.log(rest.data.error);
      }
   }).catch((error)=>{
       console.log(error);
   })
}