Vue-Router: 페이지 새로 고침 후 로그인 페이지로 돌아가는 보기

Vue-Router: 페이지 새로 고침 후 로그인 페이지로 돌아가는 보기

Vuejs로 앱을 만들고 vue-router와 vuex를 사용하고 있습니다.사용자 로그인 후 앱이 대시보드로 리다이렉트되지만 페이지를 새로 고치면 다시 로그인 페이지로 돌아갑니다.사용자가 로그인되었는지 확인하기 위해 앱은 access_display가 있는 경우 로컬 스토리지를 확인한 다음 라우터 뷰 "/"로 리디렉션됩니다.

라우터 폴더와 그 파일입니다.

src/router

index.syslog:

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

각 .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 }
   }
 ]

새로 고침 시 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
)

언급URL : https://stackoverflow.com/questions/42250717/vue-router-view-returning-to-login-page-after-page-refresh