vue-template-admin实现oAuth2.0第三方登录，获取用户信息

什么是OAuth2.0?
OAuth2.0是一种允许第三方应用程序使用资源所有者的凭据获得对资源有限访问权限的一种授权协议。例如在前面的例子中，通过微信登录豆瓣网的过程，就相当于微信允许豆瓣网作为第三方应用程序在经过微信用户授权后，通过微信颁发的授权凭证有限地访问用户的微信头像、手机号，性别等受限制的资源，从而来构建自身的登录逻辑。

需要说明的是在OAuth2.0协议中第三方应用程序获取的凭证并不等同于资源拥有者持有的用户名和密码，以上面例子来说微信是不会直接将用户的用户名、密码等信息作为凭证返回给豆瓣的。这种授权访问凭证一般来说就是一个表示特定范围、生存周期和其访问权限的一个由字符串组成的访问令牌，也就是我们常说的token。在这种模式下OAuth2.0协议中通过引入一个授权层来将第三方应用程序与资源拥有者进行分离，而这个授权层也就是我们常说的“auth认证服务/sso单点登录服务器”。

那么我们下面就说一下 用vue-template-admin 后台模板实现oAuth2.0第三方登录

我们简单的把oAuth2.0分为5步讲解

先简单的写一个第三方登录按钮，后端会给前端一个链接，我们点击登录按钮会跳转到第三方授权页面

之后我们创建一个中间页，中间页的作用就是获取token以及将token存储在cookie中（中间页的路径要统一后端的路径，否则不能跳到中间页）

在router中配置中间页路由，一定要把模式修改为history

到了中间页，中间页的路径会拼接token 所以以下代码就是判断页面有没有token，如果有token，那么就把token存储到cookie中

  created(){
     if(this.$route.query.token){
     //这里在vuex里定义了，其实是在vuex中调用了cookie接口，存到了cookie
      this.$store.dispatch("Login",this.$route.query.token)
      // 跳转到首页
      this.$router.push({path:"/"})
     }else{
      //  跳转到登录页
     this.$router.push({path:"/"})
     }
   },

这里是vuex里的写法，不得不说花裤衩大佬的代码写的真的好！

 actions: {
    // 第三方登录  直接存token
    Login({ commit }, token) {
      // const username = userInfo.username.trim()
      return new Promise((resolve, reject) => {
        // 调用auth文件的setToken
        setToken(token)
        // 把token存入SET_NAME
          commit('SET_TOKEN',token)
          // resolve()
      })
    }
    }

这是上一段代码提到的auth文件的setToken，
到这里我们就把token存储到了cookie中，这样我们第一步就算完成了

// 存token
export function setToken(token) {
  return Cookies.set(pugeKey, token)
};

第二步：在utils文件夹下的request.js中，把请求头改为我们的token

// request拦截器
service.interceptors.request.use(
  config => {
    if (store.getters.token) {
      config.headers["token"] = getToken(); // 让每个请求携带自定义token 请根据实际情况自行修改
    }
    return config;
  },
  error => {
    // Do something with request error
    console.log(error); // for debug
    Promise.reject(error);
  }
);

第三步：使用路由守卫判断有没有token 这个文件叫permission.js （到了这一步就可以登录进去了）

登录以后，我们就可以请求用户信息了
用户信息我们也选择存储到cookie中

请求用户信息依然是在vuex中

   // 获取用户信息
    GetInfo({ commit }) {
      return new Promise((resolve, reject) => {
      //这里是调用了请求接口
        userinfo().then(response => { 
          // console.log(response);
          //  把数据存储到cookie中
          setpugeuser(response.data.pugeUser)
          commit("SET_NAME", response.data.pugeUser)
          commit("SET_AVATAR" ,response.data.avatar )
          resolve()
        }).catch(error => { 
          reject(error)
        })
        }

在需要用户数据的页面从cookie中取数据

     geCookietUserInfo() {
       var userInfo = getuserInfo();
      //  console.log(userInfo);
        if (userInfo) {
        //因为cookie中的数据是字符串，我们要转为我们json格式才可以用
          userInfo = JSON.parse(userInfo);
         this.pugeUser = userInfo;
         ;
        }
     },

这个功能到这里基本上就完结了，觉得能帮到你的，记得给个赞再走哦！