路由器功能 - 'beforeEnter' 从 vuex 获取默认值

Question

具体问题是什么？

我正在使用 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 之前，我想重定向到另一条路由，因此它采用默认值。感谢您的帮助！

Answer 1

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

逻辑是：未经授权的用户登陆受保护的路由A，在进入之前，路由器重定向到login，授权成功后登录再次重定向到A.

登录如何知道登录后重定向到哪个路由？？您可以将重定向路由的名称作为路由参数或查询发送，或者您可以将预期路由存储在商店中，然后登录重定向到参数、查询或商店中找到的任何内容。

路由器功能 - 'beforeEnter' 从 vuex 获取默认值

Router function - 'beforeEnter' takes default values from vuex

javascript

vue.js

vue-router

vuex

vuejs3

具体问题是什么？

这是路由文件

这是我的商店

这是 isLoggedIn 的变化