vue頁面跳轉攔截器
阿新 • • 發佈:2018-12-31
登入攔截邏輯
第一步:路由攔截
首先在定義路由的時候就需要多新增一個自定義欄位requireAuth
,用於判斷該路由的訪問是否需要登入。如果使用者已經登入,則順利進入路由,
否則就進入登入頁面。在路由管理頁面新增meta欄位
import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) const routes = [ { path: '/', name: "歡迎", meta: { requireAuth: true, // 新增該欄位,表示進入這個路由是需要登入的 }, component: resolve => require(["../components/Hello.vue"], resolve) }, { path: '/login', name: "登入", /*meta: { requireAuth: false, // 新增該欄位,表示進入這個路由是需要登入的 },*/ component: resolve => require(["../view/login/login.vue"], resolve) } ] export default new Router({ base: "/", routes })
定義完路由後,我們主要是利用vue-router
提供的鉤子函式beforeEach()
對路由進行判斷。。所以在main.js加上
router.beforeEach((to, from, next) => {
if (to.meta.requireAuth) { // 判斷該路由是否需要登入許可權
if (store.state.token) { // 通過vuex state獲取當前的token是否存在
next();
}
else {
next({
path: '/login' ,
query: {redirect: to.fullPath} // 將跳轉的路由path作為引數,登入成功後跳轉到該路由
})
}
}
else {
next();
}
})
每個鉤子方法接收三個引數:
* to: Route: 即將要進入的目標 路由物件
* from: Route: 當前導航正要離開的路由
* next: Function: 一定要呼叫該方法來 resolve 這個鉤子。執行效果依賴 next 方法的呼叫引數。
* next(): 進行管道中的下一個鉤子。如果全部鉤子執行完了,則導航的狀態就是 confirmed (確認的)。
* next(false): 中斷當前的導航。如果瀏覽器的 URL 改變了(可能是使用者手動或者瀏覽器後退按鈕),那麼 URL 地址會重置到 from 路由對應的地址。
* next(‘/’) 或者 next({ path: ‘/’ }): 跳轉到一個不同的地址。當前的導航被中斷,然後進行一個新的導航。
確保要呼叫 next 方法,否則鉤子就不會被 resolved。
其中,to.meta
中是我們自定義的資料,其中就包括我們剛剛定義的requireAuth
欄位。通過這個欄位來判斷該路由是否需要登入許可權。需要的話,同時當前應用不存在token,則跳轉到登入頁面,進行登入。登入成功後跳轉到目標路由。
完成後,我們可以在登入頁面。控制使用者登入成功後,vuex的token狀態改變就可以了
<script>
export default {
methods:{
login(){
this.$store.commit('setToken','true'); //改變token狀態
let redirect = decodeURIComponent(this.$route.query.redirect || '/'); 獲取登入成功後要跳轉的路由。
this.$router.push({
path: redirect
})
}
}
}
</script>