Vue的路由器導航gaurd

我在vuex store.js使用來自集中式狀態管理 vuex我的登錄狀態存儲爲像下面Vue的路由器導航gaurd

export const store = new Vuex.Store({ 
state: { 
loggedIn: false, 
userName: 'Guest', 
error: { 
    is: false, 
    errorMessage: '' 
} 
}, 
getters: { 
g_loginStatus: state => { 
    return state.loggedIn; 
}, 
g_userName: state => { 
    return state.userName; 
}, 
g_error: state => { 
    return state.error; 
} 
} 
)};

當我在用戶登錄設置一個布爾值loginstatus爲true，並刪除登錄按鈕，並用註銷按鈕取代一切工作正常，但問題是當用戶登錄，如果我直接在搜索欄中輸入登錄組件的路徑，我可以導航到登錄頁面我想搶先此行爲如果使用已登錄並搜索登錄頁面的路徑他必須被重定向到主頁

我在登錄組件使用beforeRouteEnter嘗試，但我們沒有接取到這個實例，因爲該組件沒有加載所以，我怎樣才能檢查搜索欄從我的商店的登錄狀態

我在login.vue腳本

script> 

export default{ 
    data(){ 
     return{ 
      email: '', 
      password: '' 
     }; 
    }, 
    methods: { 
     loginUser(){ 
      this.$store.dispatch('a_logInUser', {e: this.email, p: this.password}).then(() =>{ 
       this.$router.replace('/statuses'); 

      }); 
     } 
    }, 
    beforeRouteEnter (to, from, next) { 
     next(vm => { 
      if(vm.$store.getters.g_loginStatus === true){ 
       //what shall i do here 
      } 
     }) 
    } 
}

來源

2017-03-17 rv krish

您可以將用戶重定向到主頁或其他一些相關頁面：

mounted() { 
     if(vm.$store.getters.g_loginStatus === true){ 
      this.$router('/') 
     } 
} 
beforeRouteEnter (to, from, next) { 
    next(vm => { 
     if(vm.$store.getters.g_loginStatus === true){ 
      next('/') 
     } 
    }) 
}

從docs：

下一個：功能：該功能必須調用解決了鉤。該動作取決於提供給下一個參數：

next（）：移動到管道中的下一個掛鉤。如果沒有掛鉤，則導航被確認。

next（false）：中止當前導航。如果瀏覽器的網址被更改（無論是由用戶手動還是通過返回按鈕），它將被重置爲源自路由的URL。

next（'/'）or next（{path：'/'}）：重定向到不同的位置。當前的導航將被中止，並將啓動一個新的導航。

來源

2017-03-17 15:08:07 Saurabh

我試過這種方法有時,,,,它的工作原理，但有時登錄頁面被打開，如果我直接在搜索進入登錄頁面的URL。 –

@VamsiKrishna嘗試我編輯的代碼，添加掛載塊。 – Saurabh

嘗試添加掛載的鉤子，但現在我按登錄按鈕後沒有什麼happpens，url更改時，我clivck其他路由器的鏈接，但頁面停留在登錄頁 –

Vue的路由器導航gaurd

回答

相關問題