关于Token传递至服务端的一个问题

Question

小弟才疏学浅。关于ajax返回token数据有一事不明，还望诸位不吝赐教

问题描述

完成登陆注册功能之后，将token放到请求头的Authorization里面，用ajax重定向，但是服务端无法接收到token

问题出现的环境背景及自己尝试过哪些方法

如图，登陆注册之后，服务端发送token给客户端，同时客户端完成数据永久化

相关代码

register.js部分代码如下

        $('#registerForm').on('submit',function(e){
          e.preventDefault()
          var formData =$(this).serialize()
          $.ajax({
            url:'/registe',
            type:'post',
            data:formData,
            dataType:'json',
            success:function(data){
              var err_code=data.err_code
              if(err_code===0){
                //TOKEN持久化
                window.localStorage.setItem('user_token', data.token);
                //接下来把Token的信息保存在请求头Authorization中
                // jquery提供了一个在请求之前设置Authorization的方法
                $.ajaxSettings.beforeSend = function (xhr, request) {
                    const user_token = window.localStorage.getItem('user_token');
                    if(user_token){
                    xhr.setRequestHeader('Authorization', `Bearer ${user_token}`);}
                    else {  return } //这点可能错了，一会还得测试一下是 return就行 还是return false
                }

//页面跳转
                window.location='/'

              }
              })
              }

你期待的结果是什么？实际看到的错误信息又是什么？

问题是，重定向至首页后，由于服务端无法接收到token，不能显示用户名
怀疑是这段出了问题

                //接下来把Token的信息保存在请求头Authorization中
                // jquery提供了一个在请求之前设置Authorization的方法
                $.ajaxSettings.beforeSend = function (xhr, request) {
                    const user_token = window.localStorage.getItem('user_token');
                    if(user_token){
                    xhr.setRequestHeader('Authorization', `Bearer ${user_token}`);}
                    else {  return } //这点可能错了，一会还得测试一下是 return就行 还是return false
                }

那么改如何修正以实现功能呢？

Answer 1

第一个问题，你重定向用的是下面这句话？

window.location='/'

第二个问题，页面加载时，用户名是前端发起ajax获取的，还是后端返回的 html 里直接就有？

Answer 2

$.ajaxSettings.beforeSend = function (xhr, request) {
    const user_token = window.localStorage.getItem('user_token');
    if(user_token){
        xhr.setRequestHeader('Authorization', `Bearer ${user_token}`);}
    else {  return } //这点可能错了，一会还得测试一下是 return就行 还是return false
}

//页面跳转
window.location='/'

你都跳转页面了，所以你上面执行的代码没用。你应该在外面就执行这句话

Answer 3

实际上cookie session是HTTP4里面用于客户端服务端交互存储信息的解决方案，在http5中引入了localstrage和sessionstrage。如果前后端分离不完全，可以考虑使用NPM的这个jwt-in-cookie
包，很方便的在服务端生成token和验证token以及将token保存到客户端的cookie中