Vue-Router: просмотр, возвращающийся на страницу входа после обновления страницы

Question

Я создаю приложение с Vuejs и используя vue-router и vuex. я застрял сейчас, потому что после входа в систему мое приложение перенаправляется на панель управления, но если я обновляю страницу, он снова вернется на страницу входа. чтобы проверить, зарегистрирован ли пользователь, мое приложение проверяет localstorage, если у него есть access_token, затем он перенаправляется на просмотр маршрутизатора «/» или нет.

это мой маршрутизатор папка и его файлы:

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 
)