2020-web前端-加密权限登录oauth2.0-这里是基于oauth2.0来做前后端数据交互

这个就是主要axios里面加token，跟以前加入的token基本上hi一样的。

1.这个是用jquery来实现的

function save() {
    var username = $("#username1").val();
    var name = $("#name1").val();
    var password = $("#password").val();
    var roles = jQuery("#roletable").jqGrid('getGridParam', 'selarrrow');
    var json = JSON.stringify({
        "username": username,
        "name": name,
        "password": password,
        "roles": roles
    });
    doAjax(_URL + "/user", json, "POST", function (xhr) {//加请求头
            xhr.setRequestHeader("jwt-token", getToken());
            xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
        },
        function (data) {
            if (data.status == 200) {
                layer.msg("保存成功");
                $("#mymodal").modal("hide");//关保存对话框
            }
            else {
                layer.msg(data.message);
            }

        }
    )
}

2.用axios来实现这个功能，Oauth2.0授权请求

• 授权服务端要设置请求中的回调域名或ip地址
• 当使用code来请求access_token时，发起的请求头Header中要设置"Authorization": …,具体的Authorization值可能不同的服务端会有区别，我的项目中用的是

//BASE64编码字符串"clientId:clientSecret"
'Basic ' + window.btoa(clientId + ':' + clientSecret);

此处设置的 Authorization callback URL 即为客户端的回调页面。客户端申请携带的参数与这个地址不同会报相应的错误。得到client信息后就可以在auth组件内设置字段了。

" @/components/GithubAuth.vue "
data () {
    return {
      client_id: 'your client ID',
      client_secret: 'your client secret',
      scope: 'read:user', // Grants access to read a user's profile data.
      state: 'your state',
      getCodeURL: 'https://github.com/login/oauth/authorize',
      getAccessTokenURL: '/github/login/oauth/access_token', 
      getUserURl: 'https://api.github.com/user',
      redirectURL: null,
      code: null,
      accessToken: null,
      signState: false
    }
  }

模板中加入登录按钮, 保存之前的地址至cookie以便登录后回调，跳转至授权页面。

<a href="#" v-on:click="saveURL">登录</a>

saveURL: function () {
      if (Query.parse(location.search).state !== this.state) {
        this.$cookie.set('redirectURL', location.href, 1)
        location.href = this.getCodeURL
      }
    }

组件创建后，检查地址栏是否存在有效code。如果存在则进行相应处理，获取有效accesstoken存入cookie，页面回调至登录之前保存的地址。 如果不存在则检查cookie内是否存在accesstoken 获取用户信息。注意： 需要计算得到的属性务必在computed下定义。

computed: {
    formatCodeURL: function () {
      return this.getCodeURL + ('?' + Query.stringify({
        client_id: this.client_id,
        scope: this.scope,
        state: this.state
      }))
    }
  }

 created: function () {
    this.getCode()
    // when code in url
    if (this.code) this.getAccessToken()
    else {
      // if no code in top, get accessToken from cookie
      this.accessToken = this.$cookie.get('accessToken')
      if (this.accessToken) this.getUser()
    }
  }

• 获取地址栏携带的code参数的处理：getCode()

getCode: function () {
      this.getCodeURL += ('?' + Query.stringify({
        client_id: this.client_id,
        scope: this.scope,
        state: this.state
      }))
      let parse = Query.parse(location.search)
      if (parse.state === this.state) {
        this.code = parse.code
      }
    }

• 利用code获取accesstoken的处理： getAccessToken()

getAccessToken: function () {
      this.axios.post(this.getAccessTokenURL, {
        client_id: this.client_id,
        client_secret: this.client_secret,
        code: this.code,
        state: this.state
      }).then((response) => {
        this.accessToken = response.data.access_token
        if (this.accessToken) {
          // save to cookie 30 days
          this.$cookie.set('accessToken', this.accessToken, 30)
          this.redirectURL = this.$cookie.get('redirectURL')
          if (this.redirectURL) {
            location.href = this.redirectURL
          }
        }
      })
    }

这个是退出登录的写法

• 请求用户信息成功后触发了loginEvent事件，并以当前用户信息作为参数传递出去。
• 用户登出的处理： logout()

<a v-else v-on:click="logout" href="#">注销</a>

logout: function () {
      this.$cookie.delete('accessToken')
      this.signState = false
      this.$emit('logoutEvent')
    }