使用导航防护时未呈现嵌套的 Vue 组件

Posted 2023-02-22

【中文标题】使用导航防护时未呈现嵌套的 Vue 组件

【英文标题】：Nested Vue component not rendered when navigation guard is used

【发布时间】：2020-07-14 02:32:42

【问题描述】：

PS：这是我关于 SO 的第一个问题，请原谅我犯的任何错误

我的代码如下

Login.vue

  <div class="login">
    <div class="dialog row justify-content-end">
      <div class="col col-md-5 col-lg-3">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script>
export default 
  name: "Login",
  data() 
    return ;
  
;
</script>

<style lang='scss'>
.login 
  height: 100vh;

</style>

OTP_Request.vue

<template>
  <div class="otp-request">
    <div class="row justify-content-center pt-5">
      <div class="col" id="login-page-title">Parent's Login</div>
    </div>
    <div class="row justify-content-center pt-5">
      <div class="col" id="prompt">Enter Your Phone Number</div>
    </div>
    <div class="row justify-content-center pt-3">
      <input type="text" id="phoneNo" />
    </div>
    <div class="row justify-content-center pt-3">
      <button>Get OTP</button>
    </div>
  </div>
</template>

<script>
export default 
  name: "OTP_Request"
;
</script>

<style lang='scss'>
#login-page-title 
  text-align: center;
  font-weight: 700;

#prompt 
  text-align: center;
  font-weight: 500;

#phoneNo 
  text-align: center;

</style>

验证一次性密码

<template>
  <div class="otp-verify">
    <div class="row justify-content-center pt-5">
      <div class="col" id="verify-page-title">Verify OTP</div>
    </div>
  </div>
</template>

<script>
export default 
  name: "OTP_Verify"
;
</script>

<style lang='scss'>
#verify-page-title 
  font-weight: 700;

</style>

路由器/index.js

import VueRouter from "vue-router";
import firebase from "firebase";

Vue.use(VueRouter);

const routes = [
  
    path: "/",
    name: "Home",
    component: () => import("../views/Home")
  ,
  
    path: "/login",
    component: () => import("../views/Login"),
    children: [
      
        path: "",
        component: () => import("../components/OTP_Request")
      ,
      
        path: "verify",
        component: () => import("../components/OTP_Verify")
      
    ]
  
];

const router = new VueRouter(
  mode: "history",
  base: process.env.BASE_URL,
  routes
);


// NAVIGATION GUARD
// router.beforeEach((to, from, next) => 
//   firebase.auth().onAuthStateChanged(function(user) 
//     if (to.path !== "/login" && user == null) 
//       if (to.fullPath !== "/login/verify") next("/login");
//      else 
//       next();
//     
//   );
// );

export default router; 

因此，嵌套路由可以正常工作并在不使用导航保护时呈现 OTP_Verify 组件。但是当我取消注释时，OTP_Request 组件按预期呈现，但是当我前往路径 /login/verify 时，（主应用程序组件）完全为空。登录组件未呈现。我究竟做错了什么 ？

【参考方案1】：

问题

问题在于您的导航保护代码。

当您导航到/login/verify 时，永远不会调用next()。

我在这里if (to.fullPath !== "/login/verify") next("/login");

正如您在 vue-router 导航守卫中所知道的，要进行路由，应该调用 next()。

解决方案

为处理上述情况添加一个案例，以便始终调用 next()。

router.beforeEach((to, from, next) => 
   firebase.auth().onAuthStateChanged(function(user) 
     if (to.path !== "/login" && user == null) 
       if (to.fullPath !== "/login/verify") 
         next("/login");
        
       else next();  // --> HERE
      else 
       next();
     
   );
 

【讨论】：

我知道已经很久了，但谢谢！ :)