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

Posted 2023-02-22

【中文标题】基于角色的身份验证 vue js firebase

【英文标题】：Role-Based Authentication vue js firebase

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

【问题描述】：

我将 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)
  

);

【问题讨论】：

请分享您的整个路由器文件。

你好兄弟，我已经分享了所有的路由器文件

您如何定义患者？通过特定的自定义声明？如果是，是哪一个？

【参考方案1】：

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

【讨论】：

hai..我已将其更改为 firebase.auth().onAuthStateChanged.next()(userAuth => 结果变为空白屏幕