Javascript Vue路由器和Firebase中间件。登录后我无法移动到下一页

我正在使用vue和firebase。 我想使用vue路由器添加重定向方法

在我的vue路由器代码中，中间件的多个页面中有meta:{requiresAuth:true}

我的vue路由器重定向方法是，如果jwt令牌未存储在本地存储中，则url重定向到/login

我使用的是firebase，因此我认为用户帐户令牌在用户登录时存储在本地存储中。 因此，如果我的vuex代码正确，我的vue路由器代码应该可以正常工作

现在，如果我以用户身份登录，url不会改变。但如果我进入 特定用户的仪表板页面，重定向正在工作

为什么我登录时url没有更改

import Vue from 'vue'
import VueRouter from 'vue-router'
//import Home from '../views/Home.vue'
import Dashboard from '../views/Dashboard.vue'
import OrdersMobile from '../views/OrdersMobile.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import(/* webpackChunkName: "about" */ '../selfonboarding/Home.vue')
  },
  {
    path: '/login',
    name: 'Login',
    component: () => import(/* webpackChunkName: "about" */ '../components/Login.vue')
  },
  {
    path: '/dashboard/',
    name: 'Dashboard',
    component: Dashboard,
    meta: { requiresAuth: true },
    children: [
      {
        path: 'products/:id',
        name: 'Products',
        component: () => import(/* webpackChunkName: "about" */ '../views/Products.vue')
      },
      {
        path: 'working-hours/:id',
        name: 'WorkingHours',
        component: () => import(/* webpackChunkName: "about" */ '../views/WorkingHours.vue')
      },
      // {
      //   path: 'pictures/:id',
      //   name: 'Pictures',
      //   component: Pictures,
      // },
      {
        path: 'orders/:id',
        name: 'Orders',
        component: () => import(/* webpackChunkName: "about" */ '../views/Orders.vue')
      },
      {
        path: 'orders.s/:id',
        name: 'OrdersMobile',
        component: OrdersMobile,
        children: [
          {
            path: 'processed',
            name: 'Processed',
            component: () => import(/* webpackChunkName: "about" */ '../views/Processed.vue')
          }
        ]
      },
      {
        path: 'information/:id',
        name: 'Information',
        component: () => import(/* webpackChunkName: "about" */ '../views/Information.vue')
      },
      {
        path: 'information.s/:id',
        name: 'InformationMobile',
        component: () => import(/* webpackChunkName: "about" */ '../views/InformationMobile.vue')
      },
    ]
  }
]


const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes,
})


router.beforeEach((to, from, next) => {
  if(to.matched.some(record => record.meta.requiresAuth)) {
      if (localStorage.getItem('jwt') == null) {
          next({
              path: '/login',
              params: { nextUrl: to.fullPath }
          })
      } 
  } else {
      next()
  }
})


export default router

vuex代码 ../store/user.js

import 'firebase/firebase-auth'
import fireApp from '@/plugins/firebase'
import router from '../../router'
const firebase = require("firebase");
require("firebase/firestore");
const db = firebase.firestore();

const state = {
    currentUser: null
}

const getters = {
    currentUser: state => state.currentUser
}

const mutations = {
    userStatus: (state, user) => {
       
        user === null ? state.currentUser = null : state.currentUser = user.email
      }
}

const actions = {
 signIn: async ({ commit }, user) => {
    try {
      const userData = await fireApp.auth().signInWithEmailAndPassword(
          user.email,
          user.password
      );

        // Get the user id (from the user object I guess)
        const userId = fireApp.auth().currentUser.uid;
        // or maybe through  const userId = fireApp.auth().currentUser.uid;

        const proUserDocRef = db.collection('ProUser').doc(userId);
                    
        proUserDocRef.get().then((doc) => {
                if(doc.exists && doc.data().status === true) {
                    router.push({name:'Products',params:{id: userId}}).catch(err => {})
                } else if(doc.exists && doc.data().status === false){
                    router.push({name:'Welcome',params:{id: userId}}).catch(err => {})
                } else {
                    alert('You are not registered as a pro user.')
                }
        })

        
    }
    catch(error) {
        const errorCode = error.code
        const errorMesage = error.message
        if(errorCode === 'auth/wrong-password') {
            alert('wrong password')
        } else {
            alert(errorMesage)
            }
        }
    },

    signOut: async({ commit }) => {
        try {
            await fireApp.auth().signOut()
        }
        catch(error) {
            alert(`error sign out, ${error}`)
        }
        commit('userStatus', null)
    }
}

export default {
    state,
    mutations,
    getters,
    actions
}

---

当路线需要身份验证且您登录时，

beforeach

导航卫士缺少一个

next（）

调用：

router.beforeach（（to，from，next）=>{
if（to.matched.some（record=>record.meta.requireAuth））{
if（localStorage.getItem（'jwt'）==null）{
下一个({
路径：'/login'，
参数：{nextUrl:to.fullPath}
})
}否则{
next（）；//添加这个✅
}
}否则{
下一个（）
}
})

我添加了

const token = await firebase.auth().currentUser.getIdToken(true)
localStorage.setItem('jwt', token)

在user.js操作部分。 然后，我就可以做到了

我无法在本地存储中设置jwt令牌。 所以当我登录到这个网站时我就这么做了

---

我还缺少添加next（）。

对不起，我现在检查了，结果为空。没关系。听起来您需要检查在

localStorage

中设置jwt的代码部分，我添加了将密钥设置为本地存储中的“jwt”的代码。我无法将密钥设置为“jwt”令牌。