弯道超车-Token处理

弯道超车-Token处理

一、 RefreshToken滑动过期处理：是在使用JWT进行授权的时候AccessToken过期了，然后通过如上token去重新获取可用的token，简单点就是说当用户在持续使用token的时候，我们需要做到每次在基础上加对应的时间，而不是直接跳转到登录首页。接下来就是介绍如何进行滑动过期的操作。先看如下图：

1. 

二、后端代码处理：

1. 生成Token+RefreshToken，重点是第一步的时候，生成refreshToken的时候，需要把用户的信息缓存起来，方便下次使用该token来兑换。

/// <summary>
        /// 生成Token+RefreshToken
        /// </summary>
        /// <param name="name"></param>
        /// <param name="password"></param>
        /// <returns></returns>
        [Route("LoginWithRefresh")]
        [HttpPost]
        public string LoginWithRefresh([FromForm] string name, [FromForm] string password)
        {
            Console.WriteLine($"This is LoginWithRefresh name={name} password={password}");
            if ("Eleven".Equals(name, StringComparison.OrdinalIgnoreCase) && "123456".Equals(password))//应该数据库
            {
                CurrentUserModel currentUser = new CurrentUserModel()
                {
                    Id = 123,
                    Account = "132313",
                    EMail = "test@qq.com",
                    Mobile = "123456",
                    Sex = 1,
                    Age = 33,
                    Name = "wj",
                    Role = "Admin"
                };

                var tokenPair = this._iJWTService.GetTokenWithRefresh(currentUser);
                if (tokenPair != null && !string.IsNullOrEmpty(tokenPair.Item1))
                {
                    return JsonConvert.SerializeObject(new AjaxResult<string>()
                    {
                        Result = true,
                        Message = "验证成功",
                        TValue = tokenPair.Item1,
                        OtherValue = tokenPair.Item2//写在OtherValue
                    });
                }
                else
                {
                    return JsonConvert.SerializeObject(new AjaxResult<string>()
                    {
                        Result = false,
                        Message = "颁发token失败",
                        TValue = ""
                    });
                }
            }
            else
            {
                return JsonConvert.SerializeObject(new AjaxResult<string>()
                {
                    Result = false,
                    Message = "验证失败",
                    TValue = ""
                });
            }
        }

2. 同时提供一个刷新token的方法： 通过refreshToken去换有效的token

 [Route("RefreshToken")]
        [HttpPost]
        public async Task<string> RefreshToken([FromForm] string refreshToken)
        {
            await Task.CompletedTask;
            if (!refreshToken.ValidateRefreshToken())
            {
                return JsonConvert.SerializeObject(new AjaxResult<string>()
                {
                    Result = false,
                    Message = "refreshToken过期了",
                    TValue = ""
                });
            }
            var token = this._iJWTService.GetTokenByRefresh(refreshToken);
            if (!string.IsNullOrEmpty(token))
            {
                return JsonConvert.SerializeObject(new AjaxResult<string>()
                {
                    Result = true,
                    Message = "刷新Token成功",
                    TValue = token,
                    OtherValue = refreshToken//写在OtherValue
                });
            }
            else
            {
                return JsonConvert.SerializeObject(new AjaxResult<string>()
                {
                    Result = false,
                    Message = "刷新token失败",
                    TValue = ""
                });
            }
        }

三、前端处理

1. 前端主要是在调用的时候使用token去获取，然后发现token过期了，就调用获取refreshToken的方法，成功以后就继续执行之前的操作，反之就跳转登录页。

相关代码示例：

@section Scripts{
<script type="text/javascript">
       $(function () {
                  $("#btnLogin").on("click", function () {
                      $.ajax({
                          url: "/Token/Login?Name=Eleven&Password=123456",
                          type: "get",
                          data: {},
                          success: function (data) {
                              if(data.result){
                                 localStorage["token"] =data.tValue;
                                 alert(data.tValue);
                               }
                           },
                           datatype: "json"
                       });
                  });

                    $("#btnGet").on("click", function () {
                      $.ajax({
                          url: "/Token/InfoGet",
                          type: "get",
                          data: {},
                          beforeSend: function (XHR) {
                              //发送ajax请求之前向http的head里面加入验证信息
                              XHR.setRequestHeader('Authorization', 'Bearer ' +  localStorage["token"]);
                          },
                          success: function (data) {
                              alert(data.result);
                               alert(data.tValue);
                                  }
                          , datatype: "json"
                        })
                      });

                   $("#btnPost").on("click", function () {
                      $.ajax({
                          url: "/Token/InfoPost",
                          type: "post",
                          data: {},
                          beforeSend: function (XHR) {
                              //发送ajax请求之前向http的head里面加入验证信息
                              XHR.setRequestHeader('Authorization', 'Bearer ' +  localStorage["token"]);
                          },
                          success: function (data) {
                              alert(data.result);
                               alert(data.tValue);
                                  }
                          , datatype: "json"
                        });
                      });


                      //Refresh
                      $("#btnLoginRefresh").on("click", function () {
                      $.ajax({
                          url: "/Token/LoginWithRefresh?Name=Eleven&Password=123456",
                          type: "get",
                          data: {},
                          success: function (data) {
                              if(data.result){
                                 localStorage["accessToken"] =data.tValue;
                                 //alert(data.tValue);
                                 localStorage["refreshToken"] = data.otherValue;
                                 //alert(data.otherValue);
                               }
                           },
                           datatype: "json"
                       });
                   });

                    $("#btnGetRefresh").on("click", function () {
                      $.ajax({
                          url: "/Token/InfoGet", type: "get", data: {},
                          beforeSend: function (XHR) {
                              //发送ajax请求之前向http的head里面加入验证信息
                              XHR.setRequestHeader('Authorization', 'Bearer ' +  localStorage["accessToken"]);
                          },
                          success: function (data) {
                              alert(data.result+data.tValue);
                                  },
                          datatype: "json",
                          error:function(xhr, status, error){
                                 alert(xhr.getAllResponseHeaders());//打印全部头信息
                                 alert(xhr.status);//也可以用状态作比较
                                 if(xhr.getAllResponseHeaders().indexOf('jwtchallenge: expired')>0)
                                 {
                                     //refreshToken($("#btnGetRefresh").click);//直接传递回调最好，没成功
                                     refreshToken($("#btnGetRefresh"));//传递按钮
                                 }
                              }
                            });
                      });

                      var refreshTime=0;
                      function refreshToken(callback){
                          alert("refresh-token");
                          if(refreshTime==0)
                          {
                              refreshTime++;
                          }
                          else
                          {
                              alert("需要重新登陆");
                              //跳转登录页
                          }
                      $.ajax({
                          url: "/Token/LoginByRefresh",
                          type: "post",
                          data: {"refreshToken":localStorage["refreshToken"]},
                          success: function (data) {
                              if(data.result){
                                 localStorage["accessToken"] =data.tValue;
                                 localStorage["refreshToken"] =data.otherValue;
                                 //alert(data.tValue);
                                 //callback();
                                 callback.trigger("click");
                               }
                           },
                           datatype: "json"
                       });
                   }

                   $("#btnPostRefresh").on("click", function () {
                      $.ajax({
                          url: "/Token/InfoPost", type: "post", data: {},
                          beforeSend: function (XHR) {
                              //发送ajax请求之前向http的head里面加入验证信息
                              XHR.setRequestHeader('Authorization', 'Bearer ' +  localStorage["accessToken"]);
                          },
                          success: function (data) {
                              alert(data.result);
                               alert(data.tValue);
                                  }
                          , datatype: "json",
                           error:function(xhr, status, error){
                              //alert(xhr.getAllResponseHeaders());//打印全部头信息
                              //alert(xhr.status);//也可以用状态作比较
                              if( xhr.getAllResponseHeaders().indexOf('jwtchallenge: expired')>0)
                              {
                                  //refreshToken($("#btnGetRefresh").click);//直接传递回调最好，没成功
                                  refreshToken($("#btnGetRefresh"));//传递按钮
                              }
                              }
                         })
                      });
    });
</script>
}

2. 解答：如何实现调用之前的接口的？

关键代码：

callback.trigger("click");

四、在vue项目中如何进行执行之前接口的操作？

参考代码如下：

axios.interceptors.response.use(success, async (error) => {
 let {status} = error.response;
  if (status == 401) {
      let res = await getrefreshToken(refreshToken);
      window.localstorage.token = res.token;
      return axios.request(error.config);
  }
  return Promise.reject()
})

参考文章：https://www.jianshu.com/p/f2ca652a5d29

以上就是token相关的整理，谢谢学习，点赞，关注，共同进步！！！