快捷導(dǎo)航

vue中使用router全局守衛(wèi)實(shí)現(xiàn)頁面攔截的示例

更新時(shí)間：2020年10月23日 15:23:58 作者：蟈民黨

這篇文章主要介紹了vue中使用router全局守衛(wèi)實(shí)現(xiàn)頁面攔截的示例，幫助大家維護(hù)自己的項(xiàng)目，感興趣的朋友可以了解下

一、背景

　　在vue項(xiàng)目中使用vue-router做頁面跳轉(zhuǎn)時(shí)，路由的方式有兩種，一種是靜態(tài)路由，另一種是動(dòng)態(tài)路由。而要實(shí)現(xiàn)對(duì)路由的控制需要使用vuex和router全局守衛(wèi)進(jìn)行判斷攔截(安全問題文章最后討論)

二、使用場景

　　靜態(tài)路由的使用場景：在我們使用靜態(tài)路由實(shí)現(xiàn)頁面跳轉(zhuǎn)時(shí)，不管我們是否登錄，當(dāng)我們?cè)诘刂窓谛薷牡刂泛?，頁面?huì)發(fā)生跳轉(zhuǎn)并展示頁面內(nèi)容（數(shù)據(jù)并不會(huì)被展示出來），這樣的問題顯然是不能夠被接受的；

　　動(dòng)態(tài)路由的使用場景：動(dòng)態(tài)路由無非就是從后端拿到了數(shù)據(jù)然后在加到router里面了。假如用戶登錄了，在地址欄修改地址便能直接訪問。所以動(dòng)態(tài)路由并不能起到攔截作用。

三、解決方案

　　使用vuex+router.beforeEach()+動(dòng)態(tài)路由實(shí)現(xiàn)頁面攔截

　　　　頁面刷新時(shí)會(huì)清楚vuex里面的值;(防止直接修改地址欄)

　　　　router.beforeEach()對(duì)跳轉(zhuǎn)前進(jìn)行攔截判斷;（對(duì)vuex里面的值進(jìn)行判斷）

　　　　當(dāng)用戶登錄時(shí)請(qǐng)求后臺(tái)拿到數(shù)據(jù)，加載路由.（跳轉(zhuǎn)頁面）

四、實(shí)現(xiàn)過程

1.首先定義vuex里面的值，需要定義兩個(gè)值：

a.登錄狀態(tài)信息的值 loginInfo

b.存儲(chǔ)動(dòng)態(tài)路由的值 routerList

2.router.beforeEach()對(duì)路由跳轉(zhuǎn)前進(jìn)行控制　

//全局守衛(wèi)
router.beforeEach((to, from, next)=> {
 let userId = store.state.loginInfo.id;
 //這里是對(duì)登錄后的值進(jìn)行判斷，也可對(duì)token的值進(jìn)行判斷
 if (userId === '') {
  if (to.meta.requireAuth || to.name == null) {
  next({path: '/'})
  } else {
  next();
  }
 } else {
  //初始化動(dòng)態(tài)路由方法
  initRouter(router, store); 
  next();
 }
 }
);

3.初始化動(dòng)態(tài)路由

在全局守衛(wèi)對(duì)應(yīng)條件下加載動(dòng)態(tài)路由數(shù)據(jù)routerList和在登錄成功時(shí)存儲(chǔ)登錄成功的信息loginInfo

新建一個(gè)xxx.js文件引入axios 創(chuàng)建一個(gè)函數(shù)并使用export 暴露該方法;

請(qǐng)求成功拿到數(shù)據(jù)后，把數(shù)據(jù)造成和routes里的數(shù)據(jù)一樣。然后使用 router.addRoutes 添加進(jìn)去;

index中的默認(rèn)路由

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} //是否是登錄權(quán)限控制
   };
   routerList.push(routerObj);
   });
  //add到router中
  router.addRoutes(routerList); 
  //存儲(chǔ)到vuex中
  store.commit('routerList', routerList); 

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

4.登錄成功后存儲(chǔ)成功狀態(tài)信息并跳轉(zhuǎn)頁面