Javascript Vuex getter authenticated在route guard中返回false。我假设它的计算结果为false，因为在调用autoLogin时'；还没有执行

因此，我有一个呈现登录视图的

/login

路由，我正在尝试使它成为这样，如果用户已经登录，他将被重定向到另一个路由。问题是，当我键入url

www.example.com/login

，

authenticated

由于某种原因计算为false。我的代码就是这样工作的：

登录Url:

{
    path: '/login',
    name: 'login',
    component: Login,
    beforeEnter: (to, from, next) => {
        if (store.getters.authenticated) {
            next({ name: "adminOrders" })
        } else {
            next()
        }
    }
},

Vuex身份验证存储：

import router from '../router'
import axios from 'axios'

const authentication = {
    state: {
        user: null
    },
    mutations: {
        setUser(state, user){
            state.user = user
            localStorage.setItem('userId', user.id);
            localStorage.setItem('username', user.username);
            localStorage.setItem('token', user.token);
        }
    },
    actions: {
        autoLogin({commit, dispatch}){
            const userId = localStorage.getItem('userId')
            const username = localStorage.getItem('username')
            const token = localStorage.getItem('token')

            if (!token) {
                return
            }

            let user = {
                id: userId,
                username: username,
                token: token
            }

            commit('setUser', user)

            axios.interceptors.request.use(function (config) {
                config.headers.Authorization = 'Bearer ' + token

                return config
            });
        },
    },
    getters: {
        authenticated: state => {
            return state.user ? true : false
        }
    }
}

export default authentication

我将自动登录称为App.vue，安装方式如下：

<template>
    <div id="app">
        <router-view/>
    </div>
</template>

<script>

    export default {
        mounted(){
            this.$store.dispatch('autoLogin');
        }
    }
</script>

导出默认值{
安装的（）{
这是。$store.dispatch（'autoLogin'）；
}
}
在安装
App
之前调用beforenter
，因为一旦创建
App
，路由器就会被实例化

由于您从应用程序的
mounted（）
调用
autoLogin
操作，它实际上是在路由器从存储读取getter之后运行的

但是，您可以在进入

之前从

调用
异步
操作，该操作将返回本地存储中是否存在令牌

至少，以下是可行的方法：

// routes:
  beforeEnter: async (to, from, next) => {
    const hasToken = await store.dispatch('hasToken');
    next(hasToken ? { name: 'adminOrders' } : undefined);
  }

// store:
  actions: {
    hasToken() {
      return !!localStorage.getItem('token')
    }
    // ...
  }

当您在axios拦截器中获得a时，请确保将
令牌
从
本地存储
中清除（基本上是指“令牌已过期”）。如果在尝试转到
/login
（这通常发生在
401
上）之前未清除
本地存储中的
令牌
，
输入前的
将重定向到
adminOrders
，
adminOrders
将尝试加载数据，数据调用将返回
401
，因为
token
已过期，您将进入循环。

或者，您也可以在
401
上获取一个新的
令牌
，然后更新
localStorage