Vue-Router：ページを更新した後にログインページに戻るビュー

Question

私はVuejsでvue-routerとvuexを使ってアプリケーションを構築しています。ユーザーログイン後、私のアプリはダッシュボードにリダイレクトされますが、私がページをリフレッシュすると、ログインページに戻ります。ユーザーがログに記録されているかどうかを確認するために、私のアプリはaccess_tokenを持っていればlocalstorageをチェックし、ルータビュー "/"にリダイレクトされます。

これは私のルーターのフォルダであり、彼のファイル：

src/router

index.js：

import Vue from 'vue' 

import VueRouter from 'vue-router' 

import {routes} from './routes' 

import beforeEach from './beforeEach' 

Vue.use(VueRouter) 

const router = Vue.router = new VueRouter({ 
    hashbang: false, 
    linkActiveClass: 'active', 
    saveScrollPosition: true, 
    mode: 'history', 
    base: __dirname, 
    routes 
}) 


router.beforeEach(beforeEach) 

export default router 

beforeEach.js：

import store from '../store/store' 

const isAuthRoute = route => route.path.indexOf('/login') !== -1 

const isLogged =() => store.getters.isLoggedIn 

export default (to, from, next) => { 
    if (!isAuthRoute(to) && !isLogged()) { 
    next('/login') 
    } else { 
    next() 
    } 
} 

路線：

export const routes = [ 
    { 
    path: '/', 
    component: require('../components/Application/Dashboard.vue'), 
    meta: { auth: true }, 
    children: [ 
     { 
     path: '', 
     component: require('../components/Home.vue'), 
     name: 'home', 
     meta: { auth: true } 
     }, 
     { 
     path: 'account', 
     component: require('../components/Application/Account.vue'), 
     name: 'account', 
     meta: { auth: true } 
     } 
    ] 
    }, 
    { 
    path: '/login', 
    component: require('../components/Application/Login.vue'), 
    name: 'login', 
    meta: { auth: false } 
    }, 
    { 
    path: '*', 
    component: require('../components/PageNotFound.vue'), 
    meta: { auth: false } 
    } 
] 

Answer 1

あなたはisLogged関数に、更新時にローカルな大文字小文字の区別を認識させる必要があります。

const isLogged =() => storeLoggedIn || loadSessionFromLocalStorage 
const storeLoggedIn =() => store.getters.isLoggedIn 
const loadSessionFromLocalStorage =() => (
    // if localstorage has token 
    // commit a mutation for loggedIn and then return true 
    // else return false 
)