普歌-前端结合vue-element-admin实现简单Oauth2.0内部第三方登录

前端vue实现自己的第三方登录，并把用户信息渲染上去

前言：本篇只讲解在已经搭建好了Oauth2.0内部的第三方登录的后端服务，前端如何实现登录，在讲述第三方登录之前，不懂第三方登录流程的可以看看下面几篇文章，这种技术解决了内部系统的一个账号互通，牛一点的可以自己写一个完完整整的第三方

• 一张图搞定OAuth2.0
• OAuth2.0 详解
• 理解OAuth 2.0看完这篇应该就可以理解

开发前准备

• vue-element-admin的空模板 ->vue-admin-template这是GitHub下载地址
• 一个已经搭建好的Oauth2.0的后端，这是自己学会Oauth2.0搭建的,可以用java、node等都能搭建,也可以看看第三方微信登录的实现原理。
• 一个提供获取用户信息的接口
• 还有一个可以 思考的脑袋

OAuth2.0的授权流程

OAuth2.0就是客户端和认证服务器之间由于相互不信任而产生的一个授权协议
这里是一个大体思路:
（A）用户打开客户端以后，客户端要求用户给予授权。

（B）用户同意给予客户端授权。

（C）客户端使用上一步获得的授权，向认证服务器申请令牌。

（D）认证服务器对客户端进行认证以后，确认无误，同意发放令牌。

（E）客户端使用令牌，向资源服务器申请获取资源。

（F）资源服务器确认令牌无误，同意向客户端开放资源。

前端操作流程

1. （这一步是后端处理）在了解第三方登录前提下，用一个最简单的流程来体验一下Oauth2.0的登录，当用户点击了的第三方登录的按钮之后，会跳到一个内部账号密码验证(客户端)，换取一个code，然后会跳到一个授权页面（认证服务器），这个授权有客户端id（client_id）、授权模式、授权权限、重定向等拿着信息去认证服务器换取一个访问令牌（token），最后拿着令牌去资源服务器请求资源，这就是最简单的授权,其实操作起来也就几秒钟的事，但这几秒钟执行了一堆流程
   
   下面是一个完整Oauth2.0的登录流程

2. 接下来是关于前端拿到令牌token之后的操作，结合vue-amdin-template，最终目的是拿到用户信息渲染到页面上

• 第一步前端拿到后端传来的token ，我们放到cookie里（用中间页存token，处理一些逻辑）
• 第二步取cookie中的token 实现登录（permission.js中修改逻辑）
• 第三步拿token放到请求头（在请求拦截器中），头信息根据约定好的具体修改，根据提供的接口发请求， 就会返回用户信息对象{}，拿到用户放cookie。
• 第四步就是从cookie中拿到用户信息，渲染到页面上
• 还有一个前端实现登出，点击退出，删除用户信息以及token

结合vue具体的实现过程

1. 前端拿到后端传来的token ，我们放到cookie里（用中间页存token，处理一些逻辑）

• 先创建一个中间页middlepage，在路由文件中（router/index.js）配置一下
  
• 在router/index.js文件中要改一下路由的模式（一定要改）
  
• 配置好router时,要在permission.js中的白名单里加一下,让用户可以访问到这个页面（可以上授权时重定向回来）
  
• 让我们设置一下往cookie里存放token的方法，在auth.js里（提前设置好关于存token和存用户信息的这些方法）
  这是key
  
  下面是关于token和用户信息方法
  
• 在store中的user.js创建一个异步方法用来往cookie里存token的，并全局更新state中token的数据
  
  
• 在中间页middlepage中处理一些逻辑，判断后端传没传来token
  
  以上执行完毕去浏览器cookie里看看存没存
  

2. 取cookie中的token 实现登录（permission.js中）

3. 拿token放到请求头（在请求拦截器中），头信息根据约定好的具体修改，根据提供的接口发请求， 就会返回用户信息对象{}，拿到用户放cookie

• 拿到token放到头信息
  
• 根据api设置一个接口
  
• 提前定义好发请求的方法，还是在store/user中
  
  -调用GetInfo发请求（在permission.js中），判断是否第一次登录
  

4. 4. 最后就是从cookie中拿到用户信息，渲染到页面上

• 在首页上调用从cookie中拿用户信息的方法

• 拿到数据渲染上去就行
  
  到这就可以拿到信息渲染成功
  
  

5. 前端实现登出

• 在全局user.js中设置一个前端登出，清除token以及清除用户信息
  
• 在退出的Navbar中绑定前端登出的方法
  
  

最后到这就结束了，学到了就一键三连，谢谢啦~

更多推荐：wantLG的《普歌-码上鸿鹄团队:微信小程序使用阿里巴巴iconfont矢量多色图标》

---

• 作者：wantLG
• 本文源自：wantLG的《普歌-前端结合vue-element-admin实现简单Oauth2.0内部第三方登录》
• 本文版权归作者和CSDN共有，欢迎转载，且在文章页面明显位置给出原文链接，未经作者同意必须保留此段声明，否则保留追究法律责任的权利。