时间戳

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

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

问题描述

前言：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;

标签： javascriptfirebasevue.jsauthentication

解决方案

事实证明，当从数据库中手动删除用户时，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')
})

推荐阅读