VueRouter，VueJS和Laravel路線衛兵

我想隱藏我的應用程序的一個特定頁面在一層安全（一個簡單的密碼形式，將請求發送到服務器進行驗證）後面。VueRouter，VueJS和Laravel路線衛兵

基於VueRouter的文檔，我認爲beforeEnter將是適當的。但是，我不完全確定如何讓用戶訪問某個特定組件，然後成功輸入密碼，然後才允許繼續使用此當前路由。

有沒有人有這樣的例子？我很難找到類似的東西。

import Vue from 'vue'; 
import VueRouter from 'vue-router'; 

Vue.use(VueRouter); 

const routes = [ 
    { path: '/test/:testURL', component: require('./components/test.vue'), 
    beforeEnter: (to, from, next) => { 
      // somehow load another component that has a form 
      // the form will send a request to Laravel which will apply some middleware 
      // if the middleware successfully resolves, this current route should go forward. 
    } 
    }, 
]; 

const router = new VueRouter({ 
    routes, 
    mode: 'history', 
}); 

const app = new Vue({ 
    router 
}).$mount('#app');

來源

2017-06-24 mdobrenko

假設你想只對選定的組件進行認證，您可以使用beforeEnter路線警衛去。使用下面的代碼。

const routes = [ 
    { path: '/test/:testURL', component: require('./components/test.vue'), 
    beforeEnter:requireLogin 
    }, 
]; 

function requireLogin(to, from, next) { 
    if (authenticated) { 
     next(true); 
    } else { 
     next({ 
      path: '/login', 
      query: { 
       redirect: to.fullPath 
      } 
     }) 
    } 
}

此外，您可以在登錄組件創建一個登錄界面和操作設置認證變量設置爲true後重定向到給定的重定向參數。我建議你保持認證變量在veux店

來源

2017-06-24 05:55:14 Charith

這是偉大的 - 感謝噸！我不確定我在項目中需要VueX（目前我通常沒有任何共享數據）。你將如何保持這個認證變量呢？我一直在思考一個曲奇而不是一個變量，所以我很好奇這種方法看起來像什麼 – mdobrenko

不錯。接下來的最佳方法是在瀏覽器本地存儲中捕獲此值。它實際上有好處。 – Charith

我會看看本地存儲位！所以我剛剛意識到這一點 - 我是身份驗證的新手，以及它如何與前端進行交互（之前主要使用刀片等）。建立基於'authenticated'值的認證流程是明智的嗎？這不僅僅是一個存儲在前端的變量，任何人都可以修改？ – mdobrenko

VueRouter，VueJS和Laravel路線衛兵

回答

相關問題