【问题标题】：Router function - 'beforeEnter' takes default values from vuex路由器功能 - 'beforeEnter' 从 vuex 获取默认值
【发布时间】：2021-06-30 19:25:54
【问题描述】：

具体的问题是什么？

我正在使用 vue.js 构建身份验证应用程序。当我处理安全路由时，我遇到了函数“beforeEnter”从 vuex 获取默认值的问题。这是有问题的，因为它使我无法创建安全路线。我很乐意为您提供帮助！

这里是路由文件

import { createRouter, createWebHistory } from 'vue-router'
import store from '../store/index'
const routes = [
  {
    path: '/globalData',
    name: 'GlobalData',
    component: () => import('../views/GlobalData.vue'),
    beforeEnter: (_, __, next) => {
      if (!store.state.isLoggedIn) {
        next('/about')
      }else {
        next()
      }
    }
  },
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})


export default router

这是我的商店

import { createStore } from 'vuex'

// Create a new store instance.
const store = createStore({
    state () {
        return {
            isLoggedIn: false,
        }
    },
    mutations: {
        setIsLoggedIn(state, bool) {
            state.isLoggedIn = bool;
        }
    }
})

export default store;

isLoggedIn 的变化如下

import{ onBeforeMount, ref } from 'vue'
import fire from '@/firebase';
import { useStore } from 'vuex'


export default {
  setup() {

    const store = useStore()

    onBeforeMount(() => {
      fire.auth().onAuthStateChanged((user) => {
        if (user) {
          store.commit('setIsLoggedIn', true)
          
        }else {
          store.commit('setIsLoggedIn', false)
        }
      })
    })

  }
}

我认为我的问题可能与以下事实有关：在更新 vuex 之前，我想重定向到另一个路由，因此它采用默认值。感谢您的帮助！

【问题讨论】：

标签： javascript vue.js vuex vue-router vuejs3

【解决方案1】：

一个常见的模式是有一个处理用户登录的路由并且这个路由是公共的。从这个路由你可以在登录后重定向到另一个路由，当没有登录用户时，任何受保护的路由都会重定向到登录。

逻辑如下：未授权用户登陆受保护路由A，进入前路由器重定向到login，授权成功后登录再次重定向到A。

【讨论】：