Vue.js 和 Firebase：删除了一个测试用户，现在所有路由都无法访问并且组件不呈现

Posted 2023-02-22

【中文标题】Vue.js 和 Firebase：删除了一个测试用户，现在所有路由都无法访问并且组件不呈现

【英文标题】：Vue.js & Firebase: Deleted a test user and now all routes are inaccessible and components don't render

【发布时间】：2021-04-12 07:53:09

【问题描述】：

前言：Vue.js 和 Firebase 的新手

我已经在我的 Vue 路由器文件上实施了身份验证保护，以及防止用户通过 url 手动访问路由的 Firebase 规则。

在我的 Vue 项目中以测试用户身份登录时，我从 Firebase 中手动删除了该用户。现在我无法访问登录路径来更改用户，并且浏览器中没有呈现任何内容，没有路径正在更改等。

知道如何再次访问我的路线吗？我也不完全清楚“requiresGuest”在身份验证方面的作用

我在下面包含了我的 router.js 文件

import Vue from 'vue'
import Router from 'vue-router';
import Home from '../views/Home.vue'
import SalesOrders from '../views/SalesOrders/SalesOrders.vue'
import NewSalesOrder from '../views/SalesOrders/NewSalesOrder.vue'
import ViewSalesOrder from '../views/SalesOrders/ViewSalesOrder.vue'
import Customers from '../views/Customers/Customers.vue'
import NewCustomer from '../views/Customers/NewCustomer.vue'
import EditCustomer from '../views/Customers/EditCustomer.vue'
import ViewCustomer from '../views/Customers/ViewCustomer.vue'
import Login from '../views/Admin/Login.vue'
import Register from '../views/Admin/Register.vue'
import Admin from '../views/Admin/Admin.vue'
import firebase from 'firebase'

Vue.use(Router);

let router = new Router(
  routes: [
    //ADMIN ROUTES
    
      path: '/',
      name: 'Dashboard',
      component: Home,
      meta: requiresAuth: true
    ,
    
      path: '/login',
      name: 'login',
      component: Login,
      //Applies a guard so this is accessible to certain people
      meta: requiresGuest: true
    ,
    
      path: '/register',
      name: 'register',
      component: Register,
      //Applies a guard
      meta: requiresGuest: true
    ,
    
      path: '/admin',
      name: 'admin',
      component: Admin,
      //Applies a guard
      meta: requiresGuest: true
    ,
    //SALES ORDERS ROUTES
    
      path: '/sales-orders',
      name: 'Sales Orders',
      component: SalesOrders,
      //Requires a login to access
      meta: requiresAuth: true
    ,
    
      path: '/new-sales-order',
      name: 'new-sales-order',
      component: NewSalesOrder,
      //Requires a login to access
      meta: requiresAuth: true
    ,
    
      path: '/view-order/:order_id',
      name: 'view-order',
      component: ViewSalesOrder,
      params: true,
      //Requires a login to access
      meta: requiresAuth: true
    ,
    //CUSTOMER ROUTES
    
      path: '/customers',
      name: 'customers',
      component: Customers,
      //Requires a login to access
      meta: requiresAuth: true
    ,
    
      path: '/new-customer',
      name: 'new-customer',
      component: NewCustomer,
      //Requires a login to access
      meta: requiresAuth: true
    ,
    
      path: '/edit-customer/:customer_id',
      name: 'edit-customer',
      component: EditCustomer,
      //Requires a login to access
      meta: requiresAuth: true
    ,
    
      path: 'view-customer/:customer_id',
      name: 'view-customer',
      component: ViewCustomer,
      //Requires a login to access
      meta: requiresAuth: true
    ,
  ]
);

// Nav Guard
router.beforeEach((to, from, next) => 
  // Check for requiresAuth guard
  if (to.matched.some(record => record.meta.requiresAuth)) 
    // Check if NO logged user
    if (!firebase.auth().currentUser) 
      // Go to login
      next(
        path: '/login',
        query: 
          redirect: to.fullPath
        
      );
     else 
      // Proceed to route
      next();
    
   else if (to.matched.some(record => record.meta.requiresGuest)) 
    // Check if NO logged user
    if (firebase.auth().currentUser) 
      // Go to login
      next(
        path: '/sales-orders',
        query: 
          redirect: to.fullPath
        
      );
     else 
      // Proceed to route
      next();
    
   else 
    // Proceed to route
    next();
  
);

export default router;

【参考方案1】：

事实证明，当用户从数据库中手动删除时，Firebase 用户会话不会过期。

为了解决这个问题，我将 main.js 中的 App 渲染代码替换为用户单击“注销”按钮时调用的注销函数

//This was the original code in main.js
let app;
firebase.auth().onAuthStateChanged(user => 
  if(!app)
    app = new Vue(
          vuetify,
          router,
          store,
          render: h => h(App)
    ,
    console.log(user.email)
    ).$mount('#app')
  
)

//Replace .onAuthStateChanged with .signOut.then()

firebase.auth().signOut().then(() => 
  this.$router.push('/login')
)