vue路由跳轉時判斷使用者是否登入功能的實現，vue跳轉

vue路由跳轉時判斷使用者是否登入功能的實現，vue跳轉

通過判斷該使用者是否登入過，如果沒有登入則跳轉到login登入路由，如果登入則正常跳轉。

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

簡單用vuex表示一下，不會可以自己去官網多看看；

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

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

 this.$store.commit(‘changeLogin‘,‘100‘)    //登入後改變登入狀態 isLogin = 100 ；

三丶重點來了；

在你的路由入口加上導航鉤子，具體什麼意思看代碼；

一丶設定需要校正的路由

{ path: ‘/admin‘,   component: Admin,  meta:{auth:true} // 設定當前路由需要校正  不需要校正的路由就不用寫了；不要問為什麼，自己去看官網  }  

二丶路由跳轉並校正

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

以上這篇vue路由跳轉時判斷使用者是否登入功能的實現就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援幫客之家。