Question

我创建了一个简单的具有身份验证的Vue应用程序，它允许用户创建一个帐户，使用创建的帐户登录，然后访问该应用程序。我要这样做，以便在用户创建帐户时必须得到他的批准，然后他才能登录并访问我研究过的主页，但没有找到任何东西，该怎么办？ >

这是我的登录名：

<template>
  <div class="login">
     <form action="" class="form-signin">
    <h3 class="heading">Sign In</h3>
    <input type="text" placeholder="Email" v-model="email" class="form-control"><br>
    <input type="password" placeholder="Password" v-model="password" class="form-control"><br>
    <button @click="login" class="btn btn-lg btn-primary btn-block">Log In</button>
    <p>You don't have an account? You can <router-link to="/sign-up">create one here</router-link></p>

    </form>
  </div>
</template>


<script>
import firebase from 'firebase'

export default {
  name: 'login',
  data() {
    return {
    email: '',
    password: ''
    }
  },
  methods: {
    login: function () {
     firebase.auth().signInWithEmailAndPassword(this.email, this.password).then(
      (user) => {
        this.$router.replace('home')
      },
       (error) => {
         alert(`Ooops ${error.message}`)
       }
     )
    }
  }
}
</script>

我的注册：

<template>
  <div class="sign-up">
    <form action="" class="form-signin">
    <h3 class="heading">Create a new account</h3>
    <input type="text" placeholder="Email" v-model="email" class="form-control"><br>
    <input type="password" placeholder="Password" v-model="password" class="form-control"><br>
    <button @click="signUp" class="btn btn-lg btn-success btn-block">Sign Up</button>
    <span>Already have an account?<router-link to="/login"> Sign in Here</router-link></span>
    </form>
  </div>
</template>


<script>
import firebase from 'firebase'
export default {
  name: 'signUp',
  data() {
    return {
      email: '',
      password: ''
    }
  },
  methods: {
    signUp: function () {
      firebase.auth().createUserWithEmailAndPassword(this.email, this.password).then(function(user) {
        alert('Your account has been created!')
      },
      function (error) {
        alert(`Ooops ${error.message}`)
      }
      )
    }
  }
}
</script>

我的家：

<template>
<div class="home">
  <h1>Welcome to the home page</h1>
  <button class="btn btn-danger" @click="logout">Logout</button>
</div>
</template>

<script>
import firebase from 'firebase'
export default {
  name: 'home',
  methods: {
  logout: function() {
  firebase.auth().signOut().then(() => {
  this.$router.replace('login')
  })
  }
 }
}
</script>

我的Firebase配置：

let app = ''
const config = {
  apiKey: 'AIzaSyDE0IVgepdhCOJLjcunmLN35AJ-6e0X0ak',
  authDomain: 'repti-care-90f1d.firebaseapp.com',
  databaseURL: 'https://repti-care-90f1d.firebaseio.com',
  projectId: 'repti-care-90f1d',
  storageBucket: 'repti-care-90f1d.appspot.com',
  messagingSenderId: '551446965940'
}

firebase.initializeApp(config)

firebase.auth().onAuthStateChanged(() => {
  if (!app) {
    app = new Vue({
      router,
      render: h => h(App)
    }).$mount('#app')
  }
})

还有我的路由器：

const router = new Router({
  routes: [
    {
      path: '/login',
      name: 'login',
      component: Login
    },
    {
      path: '/home',
      name: 'home',
      component: Home,
      meta: {
        requiresAuth: true
      }
    },
    {
      path: '/',
      name: 'login',
      component: Login

    },
    {
      path: '/sign-up',
      name: 'sign up',
      component: SignUp
    },
    {
      path: '*',
      redirect: '/login'
    }
  ]
})

router.beforeEach((to, from, next) => {
  const currentUser = firebase.auth().currentUser
  const requiresAuth = to.matched.some(record => record.meta.requiresAuth)

  if (requiresAuth && !currentUser) next('login')
  else if (!requiresAuth && currentUser) next('home')
  else next()
})

export default router

Answer 1

也许在firebase上的用户个人资料上创建一个额外的标志，并在他登录时检查该标志。如果您未批准，则将其设置为0，而在批准他时将其设置为1。基本上，您添加了一个简单的支票。

Answer 2

使用自定义声明。这是最安全的方法，因为可以在客户端无限制地完成配置文件更改。了解有关自定义声明here的更多信息。

您可以定义安全规则：

{
  "rules": {
    "adminContent": {
      ".read": "auth.token.approved === true",
      ".write": "auth.token.approved === true",
    }
  }
}

即使用户已登录，这也会阻止用户访问您的身边。用户获得批准后，您将致电：

admin.auth().setCustomUserClaims(uid, {approved: true}).then(() => {
  // The new custom claims will propagate to the user's ID token the
  // next time a new one is issued.
});

如何批准使用Firebase的用户注册？

2 个答案: