1. 程式人生 > >vue-router vue-x 實現狀態改變 攔截路由

vue-router vue-x 實現狀態改變 攔截路由

一丶首先在使用者登入前後分別給出一個狀態來標識此使用者是否登入(建議用vuex);

import Vue from ' vue ' import Vuex from ' vuex '
Vue. use( Vuex);
var state = { token: 0, // 初始時候給一個 token=0 表示使用者未登入 };
const
mutations = { change( state, data){ state. token = data; }
};

二丶在使用者登入時改變登入狀態;

this. $store. commit( ' change ', ' 1 ') // 登入後改變登入狀態 token = 1 ;

三、設定需要校驗的路由

{ path: ' /home '
, name: " home ", meta: { requireAuth: true}, // 新增該欄位,表示進入這個路由是需要登入的 }

四、路由跳轉校驗

router. beforeEach(( to, from, next) => { if( to. matched. some( m => m. meta. auth)){ //
對路由進行驗證 if( store. state. login == ' 1 ') { // 已經登陸 this. $router. push({ path: ' /home ',}); // 正常跳轉到你設定好的頁面 } else{ // 未登入則跳轉到登陸介面,query:{ Rurl: to.fullPath}表示把當前路由資訊傳遞過去方便登入後跳轉回來; this. $router. push({ path: ' /login ',});      }     } else{        next()   } })