使用RESTful API通过Vue处理身份验证

身份验证（登录！）是许多网站的重要组成部分。让我们看看如何使用Vue在网站上进行处理，其方式与在任何自定义后端中进行处理的方式相同。Vue实际上不能完全自己进行身份验证，为此我们需要另一个服务，因此我们将为此使用另一个服务（Firebase），然后将整个体验整合到Vue中。

身份验证在单页应用程序（SPA）上的工作方式与在重新加载每个页面的站点上的工作方式完全不同。

我们将构建一个用户登录界面，并将提交的数据发送到服务器以检查用户是否存在。如果是，我们将收到令牌。这非常有用，因为它将在我们的整个站点中用于检查用户是否仍在登录。如果没有，则用户可以随时注册。换句话说，它可以在许多条件上下文中使用。除此之外，如果我们需要来自服务器的任何需要登录的信息，则令牌将通过URL发送到服务器，以便仅将信息发送给登录的用户。

本教程的完整演示已发布在 GitHub 上， 以供那些熟悉 阅读代码的人使用。我们其余的人可以继续阅读本文。起始文件也位于 GitHub 上， 因此您可以在我们一起编码时继续进行操作。 

下载后，您将npm install在终端中运行。如果要完全自己构建此应用程序，则必须安装Vuex ，Vue Router 和axios 。我们还将在该项目中使用Firebase ，因此花点时间设置一个免费帐户并在其中创建一个新项目。

将项目添加到Firebase后，转到身份验证部分，并设置登录方法，该方法将使用传统的电子邮件/密码提供程序，该方法将存储在Firebase服务器上。

之后，我们将转到Firebase Auth REST API 文档 获取我们的注册并登录API端点。我们需要一个API密钥才能在我们的应用程序中使用这些终结点，并且可以在Firebase项目设置中找到它。

Firebase通过SDK提供身份验证，但是我们使用Auth API来演示通过任何自定义后端服务器进行的身份验证。

在我们的状态报告文件中，下面有注册表格。由于我们专注于学习概念，因此我们在这里使事情保持简单。

<template>

 <div id="signup">

   <div class="signup-form">

     <form @submit.prevent="onSubmit">

       <div class="input">

         <label for="email">Mail</label>

         <input

            type="email"

            id="email"

            v-model="email">

       </div>

       <div class="input">

         <label for="name">Your Name</label>

         <input

           type="text"

           id="name"

           v-model.number="name">

       </div>

       <div class="input">

         <label for="password">Password</label>

         <input

           type="password"

           id="password"

           v-model="password">

       </div>

       <div class="submit">

         <button type="submit">Submit</button>

       </div>

     </form>

   </div>

 </div>

</template>

如果我们不使用SPA，我们自然会使用axios将数据发送到script标签中，如下所示：

axios.post('https://identitytoolkit.googleapis.com/v1/account

 s:signUp?key=[API_KEY]',{

   email:authData.email,

   password:authData.password,

   returnSecureToken:true

 })

 .then(res =>{

   console.log(res)

 })

 .catch(error => console.log(error))        

 }

}

注册并登录

使用SPA（在这种情况下使用Vue）与上述方法非常不同。相反，我们将在文件中的操作中使用Vuex 发送授权请求store.js。我们这样做是因为我们希望整个应用程序都知道用户身份验证状态的任何更改。

actions:{

 signup ({ commit},authData){

   axios.post('https://identitytoolkit.googleapis.com/v1/accounts:signUp