Electron + Vue跨平台应用（十七）基础技法（九）Auth2.0认证在Vue中的使用: SpringCloud的统一鉴权的接入

Electron + Vue + Vscode构建跨平台应用（一）知识点补充
Electron + Vue + Vscode构建跨平台应用（二）Electron + Vue环境搭建
Electron + Vue + Vscode构建跨平台应用（三）利用webpack搭建vue项目
Electron + Vue + Vscode构建跨平台应用（四）利用Electron-Vue构建Vue应用详解
Electron + Vue + Vscode构建跨平台应用（五）Electron-Vue项目源码分析
Electron + Vue跨平台应用（六）效果还不错的登录页面
Electron + Vue跨平台应用（七）基础技法（一）
Electron + Vue跨平台应用（八）基础技法（二）
Electron + Vue跨平台应用（八）基础技法（三）
Electron + Vue跨平台应用（九）基础技法（四）
Electron + Vue跨平台应用（十）可视化（一）
Electron + Vue跨平台应用（十一）可视化（二）
Electron + Vue跨平台应用（十二）可视化（三）
Electron + Vue跨平台应用（十三）基础技法（五）
Electron + Vue跨平台应用（十四）基础技法（六）
Electron + Vue跨平台应用（十五）基础技法（七）
Electron + Vue跨平台应用（十六）基础技法（八）Nginx配置https并部署Vue

1: 为什么要接入Auth2.0统一认证
2: Auth2.0统一认证接入步骤
3: 样例代码

1: 为什么要接入Auth2.0统一认证

一言以概之，避免用户信息被第三方软件使用，将用户信息交托于一个更可靠的认证体系

2: Auth2.0统一认证接入步骤

接入步骤可以简述为如下几个步骤：

1. 页面加载Auth2.0统一认证地址（后端提供）

   这个步骤的目的就是在你的vue项目中加载统一认证登录页面，让用户完成登录的过程，这个步骤需要拼接上redirect_uri字段，该字段用于帮助Auth2.0修改浏览器跳转地址

2. 根据页面code参数获取用户token信息

   用户登录完成之后，Auth2.0统一认证会根据跳转地址修改浏览器地址，并携带上code和state等字段信息；因为你的Vue项目已经做了router的配置，所以完成登录之后即会根据你的router配置跳转到vue对应页面；

3. 获取用户信息

   有了token之后，便可以通过相关接口获取用户信息（后端提供）

3. 样例代码

1. 跨域处理，在config/index.js中进行配置
   
2. 接口配置，新建config.js文件里面完成

  baseOAuthUrl:"http://****:8080",
  //请求授权地址
  userAuthorizationUri:"http://****/oauth/authorize",
  //accessToken请求地址
  accessTokenUri : "/ocean/oauth/token",
  //用户信息请求地址
  userInfoUri:"https://****/user",
  //登出请求地址
  logoutUri:" http://****/logout",
  //项目地址
  localuri :"http://localhost:9999",
  redirect_uri : "http://localhost:9999/login",
  //客户端相关标识，请从认证服务器申请(后端提供)
  clientId: "test",
  client_secret:"123456",
  //申请的权限范围
  scope:"user",
  //可选参数，客户端的当前状态，可以指定任意值，用于校验，此次案例不做相关认证
  state:"",
  //一些固定的请求参数
  response_type:"code",
  grant_type : "authorization_code",
  code:"",

3. 加载Auth2.0统一认证页面，其实就是加载统一认证页面URL，并添加上重定向地址

```javascript
    var authorUrl = vue.$config.userAuthorizationUri;
    authorUrl = authorUrl + ('?' + vue.$querystring.stringify({
      client_id:vue.$config.clientId,
      response_type:vue.$config.response_type,
      scope:vue.$config.scope,
      state:vue.$config.state,
      redirect_uri:vue.$config.redirect_uri, 
    }))
    window.location.href = authorUrl;

4. 获取token

    vue.$ajax.post(vue.$config.accessTokenUri, {
      grant_type: 'authorization_code',
      code: code,
      client: 'test',
      redirect_uri: vue.$config.redirect_uri
    }, {
      transformRequest: [function (data) {
        return querystring.stringify(data)
      }],
      auth: {
        username: 'test',
        password: '123456'
      }
    })
      .then() 
      .catch()   
  }

5. 获取用户信息

        this.$ajax({
          url:this.$config.userInfoUri+"?"+"access_token="+tokenInfo.access_token,
          headers:{"Accept":"application/json"}
        })
          .then((response) =>{
          })
          .catch((error) =>{
          });
      }

项目地址：https://github.com/izekers/OAuthDemo_vue