ユーザーが/ 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> 

そして私は、私はアプリを初期化しindex.jsファイルを持っている私の/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 
}); 

でこれを持って、私は私のcreated(){}モジュール内で何かをするべきだと思いますが、私はそれがどのように行われるかわかりません。

セッションを設定/設定解除することができます。このセッションが存在する場合にのみ、ページへのアクセス権を与える方法がわかります。

Answer 1

Navigation Guardsを使用して、ページ遷移前のデータを確認できます。

---

によって異なります。ナビゲーションガードを使用すると、ページが切り替わる前にユーザーがログに記録されているかどうかを確認できます。例：

/dashboardにユーザが入る前に、ユーザが/dashboardに移動したい場合、Navigation Guardはユーザがログに記録されているかどうかを確認します。はいの場合は/dashboardに進み、そうでない場合は/loginにリダイレクトします。

内部的には、ログイン時にユーザーのデータを設定できます。このことを行うには多くの方法を持っていますが、システムのセキュリティを考慮しなければならない、など

This other questionは、ユーザーを検証するために簡単な例を持ってログインしthis articleはVuexを使用して、この検証を行う方法を示し、よりintestingています。