SpringBoot-Vue第三方统一认证接口——调用与对接总结

​ 基于SpringBoot-Vue的前后端分离项目，服务器部署在CentOS8操作系统上，与第三方进行统一认证接口的对接。第三方统一认证登录可以解决用户在浏览器打开多个web应用时需要输入多次用户名密码登录的问题，实现用户一次登录，多个系统使用的效果。

Web登录过程

​ Web页面集成统一认证的原理是：当在浏览器打开集成了统一认证的某应用的页面时，页面重定向跳转到统一认证登录界面，登录之后页面重新回到用户请求的目标页面，而此时，如果用户在相同浏览器再打开另外一个集成了统一认证的页面时，由于该页面也会跳转到统一认证登录页，因为是在相同浏览器，统一认证登录的session仍然有效，所以会自动验证用户已经登录，不需要重新登录，便可以自动跳转到用户访问真正的目标页面，实现单点登录。

​ web应用接入的登录流程如下：

1. 当用户首次访问Web应用时，Web应用会将请求重定向到统一认证的登录页面,重定向的过程一般是重定向到登录接口，这个过程重定向需要传三个参数：
   • client_id
   • response_type
   • redirect_uri
2. 用户在登录页面输入用户名密码后提交登录,这个过程与Web应用无关，由统一认证服务管控。
3. 统一认证服务会颁发授权码（code）和id_token给Web应用，并将用户重定向到Web应用。
4. Web应用通过id_token验证用户身份，完成本地登录。验证id_token之后，从id_token的playload中即可获取用户信息

登录接口

URL	http://serverIp:port/serverPath/oauth2/authorize
调用方式	GET
参数	redirect_uri：重定向地址 response_type：重定向的时候需要附加的用户登录信息，可选code或code id_token client_id：应用唯一标识
返回值	登录页面
属性说明	用户通过登录页面输入用户名和密码登录成功后，统一认证服务会将授权码和ID Token作为参数附加在redirect_uri后面并重定向到这个地址。 客户端可以通过ID Token获取用户信息，完成本地登录。
备注	ID Token是一个使用HS256算法和ClientSecret作为密钥签名的JWT，客户端必须使用自己的ClientSecret验证ID Token的有效性。

前端页面跳转

​ 项目使用的是RUOYI框架

​ 当进入登录页面时，使用vue-router路由守卫进行拦截，判断cookie里是否存在本地token，不存在或者token已过期则跳转到第三方登录界面进行登录。

​ 修改permission.js文件

// 路由守卫：主要用来通过跳转或取消的方式守卫路由
router.beforeEach((to, from, next) => {
   
  NProgress.start() // 开启进度条
  document.title = defSet.title
  // 跳转到index携参token
  if (to.path.indexOf('/index') !== -1) {
   
    console.log("token设置");
    if (to.query.localToken !== null && to.query.localToken !== undefined) {
   
      setToken(to.query.localToken)
    }
  }
  if (getToken()) {
   
    console.log("有token，本地登录成功");
    if (store.getters.roles.length === 0) {
   
      // 判断当前用户是否已拉取完user_info信息
      store.dispatch('GetInfo').then(res => {
   
        // 拉取user_info
        const roles = res.roles
        store.dispatch('GenerateRoutes', {
   roles}).then(accessRoutes => {
   
          // 根据roles权限生成可访问的路由表
          router.addRoutes(accessRoutes) // 动态添加可访问路由表
          console.log("路由表添加成功");
          next({
   ...to, replace: true}) // hack方法 确保addRoutes已完成
          NProgress.done()
        })
      })
        .catch(err => {
   
          store