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

Swarm413
  • 57

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

问题描述

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

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

如图,登陆注册之后,服务端发送token给客户端,同时客户端完成数据永久化
客户端token存储至local storage

相关代码

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
                }

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

回复
阅读 472
3 个回答

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

window.location='/'

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

$.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='/'

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

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

你知道吗?

宣传栏