使用RESTfulAPI通过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来演示通过任何自定义后端服务器进行的身份验证。

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

 
 
 
 
    
  
  
  
  
  1.  
    2.

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

 
 
 
 
    
  
  
  
  
  1. axios.post('https://identitytoolkit.googleapis.com/v1/account 
    2. 
  
  
  
  
  2.  s:signUp?key=[API_KEY]',{ 
    3. 
  
  
  
  
  3.    email:authData.email, 
    4. 
  
  
  
  
  4.    password:authData.password, 
    5. 
  
  
  
  
  5.    returnSecureToken:true 
    6. 
  
  
  
  
  6.  }) 
    7. 
  
  
  
  
  7.  .then(res =>{ 
    8. 
  
  
  
  
  8.    console.log(res) 
    9. 
  
  
  
  
  9.  }) 
    10. 
  
  
  
  
  10.  .catch(error => console.log(error))         
    11. 
  
  
  
  
  11.  } 
    12. 
  
  
  
  
  12. } 
    13.

注册并登录

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

 
 
 
 
    
  
  
  
  
  1. actions:{ 
    2. 
  
  
  
  
  2.  signup ({commit},authData){ 
    3. 
  
  
  
  
  3.    axios.post('https://identitytoolkit.googleapis.com/v1/accounts:signUp?key=[API_KEY]',{ 
    4. 
  
  
  
  
  4.      email:authData.email, 
    5. 
  
  
  
  
  5.      password:authData.password, 
    6. 
  
  
  
  
  6.      returnSecureToken:true 
    7. 
  
  
  
  
  7.    }) 
    8. 
  
  
  
  
  8.    .then(res =>{ 
    9. 
  
  
  
  
  9.      console.log(res) 
    10. 
  
  
  
  
  10.      router.push("/dashboard") 
    11. 
  
  
  
  
  11.    }) 
    12. 
  
  
  
  
  12.    .catch(error => console.log(error)) 
    13. 
  
  
  
  
  13.  }, 
    14. 
  
  
  
  
  14.  login ({commit},authData){ 
    15. 
  
  
  
  
  15.    axios.post(https://identitytoolkit.googleapis.com/v1/accounts:signIn?key=[API_KEY]',{ 
    16. 
  
  
  
  
  16.      email:authData.email, 
    17. 
  
  
  
  
  17.      password:authData.password, 
    18. 
  
  
  
  
  18.      returnSecureToken:true 
    19. 
  
  
  
  
  19.    }) 
    20. 
  
  
  
  
  20.    .then(res =>{ 
    21. 
  
  
  
  
  21.      console.log(res) 
    22. 
  
  
  
  
  22.      router.push("/dashboard") 
    23. 
  
  
  
  
  23.    }) 
    24. 
  
  
  
  
  24.    .catch(error => console.log(error)) 
    25. 
  
  
  
  
  25.  } 
    26. 
  
  
  
  
  26. } 
    27.

我们可以对登录方法使用几乎相同的东西，但是可以使用登录API端点代替。然后，我们将组件的注册和登录分派到商店中它们各自的操作。

 
 
 
 
    
  
  
  
  
  1. methods :{ 
    2. 
  
  
  
  
  2.  onSubmit (){ 
    3. 
  
  
  
  
  3.    constformData ={ 
    4. 
  
  
  
  
  4.      email :this.email, 
    5. 
  
  
  
  
  5.      name :this.name,     
    6. 
  
  
  
  
  6.      password :this.password 
    7. 
  
  
  
  
  7.    } 
    8. 
  
  
  
  
  8.    this.$store.dispatch('signup',formData) 
    9. 
  
  
  
  
  9.    } 
    10. 
  
  
  
  
  10.  } 
    11. 
  
  
  
  
  11. } 
    12.

formData 包含用户的数据。

 
 
 
 
    
  
  
  
  
  1. methods : { 
    2. 
  
  
  
  
  2.  onSubmit () { 
    3. 
  
  
  
  
  3.    const formData = { 
    4. 
  
  
  
  
  4.      email : this.email, 
    5. 
  
  
  
  
  5.      password : this.password 
    6. 
  
  
  
  
  6.    } 
    7. 
  
  
  
  
  7.    this.$store.dispatch('login', {email: formData.email, password: formData.password}) 
    8. 
  
  
  
  
  8.  } 
    9. 
  
  
  
  
  9. } 
    10.

我们将接收从注册/登录表单中收到的身份验证数据(即令牌和用户ID)，并将其用作Vuex的状态。最初的结果为null。

 
 
 
 
    
  
  
  
  
  1. state:{ 
    2. 
  
  
  
  
  2.  idToken:null, 
    3. 
  
  
  
  
  3.  userId:null, 
    4. 
  
  
  
  
  4.  user:null 
    5. 
  
  
  
  
  5. } 
    6.

现在，我们authUser在突变中创建一个称为的新方法，该方法将存储从响应中收集的数据。我们需要将路由器导入商店，因为稍后需要。

 
 
 
 
    
  
  
  
  
  1. import router from'/router' 
    2. 
  
  
  
  
  2. mutations :{ 
    3. 
  
  
  
  
  3.  authUser (state,userData){ 
    4. 
  
  
  
  
  4.    state.idToken =userData.token 
    5. 
  
  
  
  
  5.    state.userId =userData.userId 
    6. 
  
  
  
  
  6.  } 
    7. 
  
  
  
  
  7. } 
    8.

.then在我们的操作的signup / login方法中的块内，我们将对authUser刚刚创建的变异的响应提交并保存到本地存储中。

 
 
 
 
    
  
  
  
  
  1. actions:{ 
    2. 
  
  
  
  
  2.  signup ({commit},authData){ 
    3. 
  
  
  
  
  3.    axios.post('https://identitytoolkit.googleapis.com/v1/accounts:signUp?key=[API_KEY]'),{ 
    4. 
  
  
  
  
  4.      email:authData.email, 
    5. 
  
  
  
  
  5.      password:authData.password, 
    6. 
  
  
  
  
  6.      returnSecureToken:true 
    7. 
  
  
  
  
  7.    }) 
    8. 
  
  
  
  
  8.    .then(res =>{ 
    9. 
  
  
  
  
  9.      console.log(res) 
    10. 
  
  
  
  
  10.      commit('authUser',{ 
    11. 
  
  
  
  
  11.        token:res.data.idToken, 
    12. 
  
  
  
  
  12.        userId:res.data.localId 
    13. 
  
  
  
  
  13.      }) 
    14. 
  
  
  
  
  14.      localStorage.setItem('token',res.data.idToken) 
    15. 
  
  
  
  
  15.      localStorage.setItem('userId',res.data.localId) 
    16. 
  
  
  
  
  16.      router.push("/dashboard") 
    17. 
  
  
  
  
  17.    }) 
    18. 
  
  
  
  
  18.    .catch(error => console.log(error)) 
    19. 
  
  
  
  
  19.  }, 
    20. 
  
  
  
  
  20.  login ({commit},authData){ 
    21. 
  
  
  
  
  21.    axios.post('https://identitytoolkit.googleapis.com/v1/accounts:signIn?key=[API_KEY]'),{ 
    22. 
  
  
  
  
  22.      email:authData.email, 
    23. 
  
  
  
  
  23.      password:authData.password, 
    24. 
  
  
  
  
  24.      returnSecureToken:true 
    25. 
  
  
  
  
  25.    }) 
    26. 
  
  
  
  
  26.    .then(res =>{ 
    27. 
  
  
  
  
  27.      console.log(res) 
    28. 
  
  
  
  
  28.      commit('authUser',{ 
    29. 
  
  
  
  
  29.        token:res.data.idToken, 
    30. 
  
  
  
  
  30.        userId:res.data.localId 
    31. 
  
  
  
  
  31.      }) 
    32. 
  
  
  
  
  32.        localStorage.setItem('token',res.data.idToken) 
    33. 
  
  
  
  
  33.        localStorage.setItem('userId',res.data.localId) 
    34. 
  
  
  
  
  34.        router.push("/dashboard") 
    35. 
  
  
  
  
  35.      }) 
    36. 
  
  
  
  
  36.    .catch(error => console.log(error)) 
    37. 
  
  
  
  
  37.  } 
    38. 
  
  
  
  
  38. } 
    39.

设置身份验证防护

现在我们已经将令牌存储在应用程序中，接下来将在设置Auth Guard时使用该令牌。什么是Auth Guard?它可以保护仪表板，防止未经身份验证的用户访问没有令牌的仪表板。

首先，我们将进入路线文件并导入商店。由于令牌将确定用户的登录状态，因此导入了商店。

 
 
 
 
    
  
  
  
  
  1. import store from'./store.js' 
    2.

那么，我们的路线阵列内，去到仪表板路径，添加方法beforeEnter这个方法有三个参数：to，from和next。在这种方法中，我们只是简单地说，如果存储了令牌(如果通过身份验证，令牌将自动完成)，那么next，意味着令牌将沿着指定的路线继续。否则，我们会将未经身份验证的用户带回注册页面。

 
 
 
 
    
  
  
  
  
  1. { 
    2. 
  
  
  
  
  2.  path:'/dashboard', 
    3. 
  
  
  
  
  3.  component:DashboardPage, 
    4. 
  
  
  
  
  4.  beforeEnter (to,from, next){ 
    5. 
  
  
  
  
  5.    if(store.state.idToken){ 
    6. 
  
  
  
  
  6.      next() 
    7. 
  
  
  
  
  7.    } 
    8. 
  
  
  
  
  8.    else{ 
    9. 
  
  
  
  
  9.      next('/signin') 
    10. 
  
  
  
  
  10.    } 
    11. 
  
  
  
  
  11.  } 
    12. 
  
  
  
  
  12. } 
    13.

创建UI状态

此时，无论是否登录，我们仍然可以在导航中看到仪表板，这不是我们想要的。我们必须在调用的getters下添加另一个方法，该方法ifAuthenticated检查状态中的令牌是否为null，然后相应地更新导航项。

 
 
 
 
    
  
  
  
  
  1. getters:{ 
    2. 
  
  
  
  
  2.  user (state){ 
    3. 
  
  
  
  
  3.    returnstate.user 
    4. 
  
  
  
  
  4.  }, 
    5. 
  
  
  
  
  5.  ifAuthenticated (state){ 
    6. 
  
  
  
  
  6.    returnstate.idToken !==null 
    7. 
  
  
  
  
  7.  } 
    8. 
  
  
  
  
  8. } 
    9.

接下来，让我们打开标题组件，并auth在computed属性内部创建一个称为方法。这将分派给ifAuthenticated我们刚刚在商店中创建的吸气剂。如果没有令牌，ifAuthenticated将返回false，这自动意味着auth也将是null，反之亦然。在这之后，我们添加了一个v-if检查，如果auth是null或不是，确定仪表盘选项是否会显示在导航。

 
 
 
 
    
  
  
  
  
  1.  
    2. 
  
  
  
  
  2.  
    3.

注销

没有注销按钮的应用程序是什么?让我们创建一个名为的新突变clearAuth，它将令牌和都设置userId为null。

 
 
 
 
    
  
  
  
  
  1. mutations:{ 
    2. 
  
  
  
  
  2.  authUser (state,userData){ 
    3. 
  
  
  
  
  3.    state.idToken =userData.token 
    4. 
  
  
  
  
  4.    state.userId =userData.userId 
    5. 
  
  
  
  
  5.  }, 
    6. 
  
  
  
  
  6.  clearAuth (state){ 
    7. 
  
  
  
  
  7.    state.idToken =null 
    8. 
  
  
  
  
  8.    state.userId =null 
    9. 
  
  
  
  
  9.  } 
    10. 
  
  
  
  
  10. } 
    11.

然后，在我们的logout操作中，我们承诺clearAuth，删除本地存储并添加router.replace('/')以在注销后正确地重定向用户。

返回标题组件。我们有一种onLogout方法可以logout在商店中调度我们的行动。然后，我们@click在按钮中添加一个，该按钮将调用onLogout方法，如下所示：

 
 
 
 
    
  
  
  
  
  1.  
    2. 
  
  
  
  
  2.  
    3.

自动登录?当然!

我们的应用程序差不多完成了。我们可以使用刚刚完成的所有UI更改进行注册，登录和注销。但是，当我们刷新应用程序时，我们会丢失数据并注销，必须重新开始，因为我们将令牌和ID存储在JavaScript的Vuex中。这意味着刷新后，应用程序中的所有内容都会重新加载到浏览器中。

我们要做的是在本地存储中检索令牌。这样，无论何时刷新窗口，我们都可以在浏览器中拥有用户的令牌，只要令牌仍然有效，甚至可以自动登录用户。

创建一个名为的新动作方法，仅当用户拥有AutoLogin令牌时，我们才能userId从本地存储中获取令牌。然后，我们将数据提交给authUser突变中的方法。

 
 
 
 
    
  
  
  
  
  1. actions :{ 
    2. 
  
  
  
  
  2.  AutoLogin ({commit}){ 
    3. 
  
  
  
  
  3.    const token =localStorage.getItem('token') 
    4. 
  
  
  
  
  4.    if(!token){ 
    5. 
  
  
  
  
  5.      return 
    6. 
  
  
  
  
  6.    } 
    7. 
  
  
  
  
  7.    constuserId =localStorage.getItem('userId') 
    8. 
  
  
  
  
  8.    const token =localStorage.getItem('token') 
    9. 
  
  
  
  
  9.    commit('authUser',{ 
    10. 
  
  
  
  
  10.      idToken: token, 
    11. 
  
  
  
  
  11.      userId:userId 
    12. 
  
  
  
  
  12.    }) 
    13. 
  
  
  
  
  13.  } 
    14.

然后，我们转到我们App.vue的created方法，并在autoLogin加载应用程序时从商店中分发。

 
 
 
 
    
  
  
  
  
  1. created (){ 
    2. 
  
  
  
  
  2.  this.$store.dispatch('AutoLogin') 
    3. 
  
  
  
  
  3. } 
    4.

好极了!这样，我们就可以在应用程序内成功实现身份验证，现在可以使用进行部署npm run build。观看现场演示 以观看实际操作。

原文： https://css-tricks.com/tackling-authentication-with-vue-using-restful-apis/

网站名称：使用RESTfulAPI通过Vue处理身份验证
分享网址：http://www.kswsj.com/qtweb/news25/67325.html

网站建设、网络推广公司-成都快上网，一家网站设计、网站制作公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 成都快上网

成都快上网科技猜您喜欢

静态网站知识

同城分类信息

不锈钢防护栏　　 　乐山企业网站设计　　 　达州服务器托管　　 　成都网站营销　　 　成都商城网站制作　　 　域名ssl证书　　 　scfdjwx.com　　 　路面机械及配件　　 　微信小程序开发　　 　成都网站制作　　 　达州博佩科技　　 　网络推广公司　　 　赛亚人环保　　 　成都联通服务器托管　　 　店面门头广告　　 　都江堰网站建设　　 　tpbzx.cn　　 　做网站的公司　　 　绵阳网站建设　　 　沃尔沃发电机出租