基于角色的身份验证 vue js firebase

Question

我将 VueJS 与 Firebase 一起使用，我有医生、管理员和患者。患者用户无法访问医生的路由器。我按照源代码here https://github.com/softauthor/vuejs-firebase-role-based-auth?files=1

我无法收到错误消息，但患者可以访问路由器医生。有没有人可以给我解决这个问题

我更正了它，所以它也不起作用

    //router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import firebase from 'firebase'
import Login from '@/views/Login'
import Register from '@/views/Register'
import Admin from '@/views/Admin'
import Driver from '@/views/Doctor'
import Customer from '@/views/Patient'
import Home from '@/views/Home'

Vue.use(Router)

let router = new Router({
  routes: [
  {

      path: '/',
      name: 'home',
      component: Home,
      meta: {
        guest: true
      }
     },


  {
      path: '/register',
      name: 'register',
      component: Register,
      meta: {
        guest: true
      }
    },
    {
      path: '/login',
      name: 'login',
      component: Login,
      meta: {
        guest: true
      }
    },

    {
      path: '/admin',
      name: 'admin',
      component: Admin,
      meta: {
        auth: true
      }
    },
    {
      path: '/doctor',
      name: 'doctor',
      component: Doctor,
      meta: {
        auth: true
      }
    },
    {
      path: '/patient',
      name: 'patient',
      component: Patient,
      meta: {
        auth: true
      }
    },
  ],
})

router.beforeEach((to, from, next) => {

  firebase.auth().onAuthStateChanged(userAuth => {

    if (userAuth) {
      firebase.auth().currentUser.getIdTokenResult()
        .then(then((idTokenResult) =>

         {

          if (!!idTokenResult.claims.patient) {
            if (to.path !== '/patient')
              return next({
                path: '/patient',
              })
          } else if (!!idTokenResult.claims.admin) {
            if (to.path !== '/admin')
              return next({
                path: '/admin',
              })
          } else if (!!idTokenResult.claims.driver) {
            if (to.path !== '/doctor')
              return next({
                path: '/doctor',
              })
          }

        })
    } else {
      if (to.matched.some(record => record.meta.auth)) {
        next({
          path: '/login',
          query: {
            redirect: to.fullPath
          }
        })
      } else {
        next()
      }
    }

  })

  next()

})


export default router









//functions/index.js
    const functions = require('firebase-functions');
    const admin = require('firebase-admin');

admin.initializeApp()



exports.AddUserRole = functions.auth.user().onCreate(async (authUser) => {

  if (authUser.email) {
    const customClaims = {
      customer: true,
    };
    try {
      var _ = await admin.auth().setCustomUserClaims(authUser.uid, customClaims)

      return admin.firestore().collection("roles").doc(authUser.uid).set({
        email: authUser.email,
        role: customClaims
      })

    } catch (error) {
      console.log(error)
    }


  }



});

exports.setUserRole = functions.https.onCall(async (data, context) => {

  if (!context.auth.token.admin) return


  try {
    var _ = await admin.auth().setCustomUserClaims(data.uid, data.role)

    return admin.firestore().collection("roles").doc(data.uid).update({
      role: data.role
    })

  } catch (error) {
    console.log(error)
  }

});

Answer 1

firebase.auth().onAuthStateChanged 是异步的，所以路由器保护结束时的 next() 会被调用，而无需等待 firebase.auth().onAuthStateChanged 解决，这意味着您的路由器保护让每个人都可以通过。