Vue-Router：页面刷新后视图返回登录页面

Posted 2023-02-23

【中文标题】Vue-Router：页面刷新后视图返回登录页面

【英文标题】：Vue-Router: view returning to login page after page refresh

【发布时间】：2017-07-04 04:37:45

【问题描述】：

我正在使用 Vuejs 构建一个应用程序，并使用 vue-router 和 vuex。我现在卡住了，因为在用户登录后，我的应用程序重定向到仪表板，但是如果我刷新页面，他会再次返回登录页面。要验证用户是否已登录，我的应用程序会检查本地存储是否有 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 
   
 ]

【参考方案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
)

【讨论】：

如果可能的话，你能把它用于 router.beforeEach 函数吗？