Vue 라우터 및 Firebase 미들웨어로그인 후 다음 페이지로 이동할 수 없음

Vue 라우터 및 Firebase 미들웨어로그인 후 다음 페이지로 이동할 수 없음

vue와 firebase를 사용하고 있습니다.vue-router를 사용하여 리다이렉트 방식을 추가하고 싶습니다.

내 vue-router 코드에 메타가 있습니다. { requires }미들웨어의 여러 페이지에 Auth: true }이(가) 있습니다.

vue-router 리디렉션 방법은 jwt 토큰이 로컬 스토리지에 저장되지 않은 경우 URL이 /login으로 리디렉션됩니다.

FireBase를 사용하고 있기 때문에 로그인 시 사용자 계정 토큰이 로컬 스토리지에 저장된다고 생각합니다.따라서 vuex 코드가 올바르면 vue-router 코드는 정상적으로 동작합니다.

사용자로 로그인해도 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.displays

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
}

그beforeEach네비게이션 가드가 없습니다.next()루트에 인증이 필요하고 로그인한 경우 콜:

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();     // Add this ✅
      }
  } else {
      next()
  }
})

나는 덧붙였다.

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

user.displays 액션 섹션으로 이동합니다.그럼, 난 갈 수 있어.

로컬 스토리지에서 jwt 토큰을 설정할 수 없습니다.그래서 웹사이트에 로그인 했을 때 했어요.

또한 next() 추가가 누락되었습니다.

언급URL : https://stackoverflow.com/questions/65991460/vue-router-and-firebase-middleware-i-cannot-move-to-the-next-page-after-logging