只有當用戶登錄/ localStorage存在時，如何才能訪問Vue.js中的頁面？

Question

我目前有一個簡單的Vue.js應用程序，我正在使用這樣的vue-router。 index.html

<p> 
    <router-link to="/" exact> Home </router-link> 
    <router-link to="/about"> About </router-link> 
    <router-link to="/contact"> Contact </router-link> 
    <router-link to="/login"> Login </router-link> 
    <router-link to="/register"> Register </router-link> 
</p> 
<router-view></router-view> 

而且我有這個在我的/routes.js

import VueRouter from 'vue-router'; 

let routes = [ 
    { 
    path: '/', 
    component: require('./components/Home.vue') 
    }, 
    { 
    path: '/about', 
    component: require('./components/About.vue') 
    }, 
    { 
    path: '/login', 
    component: require('./components/Login.vue') 
    }, 
    { 
    path: '/register', 
    component: require('./components/Register.vue') 
    } 
]; 

export default new VueRouter({ 
    mode: 'history', 
    routes 
}); 

我已經index.js文件，初始化的應用程序，我想我應該我created(){}模塊中做一些事情，但我不知道它是如何做。

我可以設置/取消設置會話，所有我需要知道的是隻有在會話存在的情況下才能訪問頁面。

Answer 1

您可以使用Navigation Guards在頁面轉換結束前驗證一些數據。

---

這取決於。通過導航衛士，您可以驗證用戶是否在頁面轉換之前進行了日誌記錄。例如：

如果用戶在/home上，並且他想要轉到/dashboard，則在用戶輸入/dashboard之前，導航警衛將驗證用戶是否已登錄。如果是，則繼續到/dashboard，如果不是，則重定向到/login。

在內部，您可以設置用戶登錄時的數據。有很多方法可以做到這件事情，但你必須考慮系統的安全性等

This other question有一個簡單的例子來驗證用戶登錄和this article展示瞭如何使用做這Vuex驗證，更加intesting。