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函数了解刷新时的本地存储情况。

In [379]: a
Out[379]: 
array([[[ 78, 134,   7],
        [154,  37, 146],
        [ 39,  95,  13]],

       [[114, 138, 100],
        [175, 198, 148],
        [ 39, 130,  37]]])

In [380]: a[a[:,:,2] <= 100,2] = 200

In [381]: a
Out[381]: 
array([[[ 78, 134, 200],
        [154,  37, 146],
        [ 39,  95, 200]],

       [[114, 138, 200],
        [175, 198, 148],
        [ 39, 130, 200]]])

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

1 个答案: