如何使用 jquery 将数据从本地存储发送到后端

Posted 2023-03-10

【中文标题】如何使用 jquery 将数据从本地存储发送到后端

【英文标题】：How to send data from localstorage to backend with jquery

【发布时间】：2018-06-15 03:13:05

【问题描述】：

如何使用 jquery 从 localstorage 发送 jsonwebtoken 到节点服务器。我试图用这种方式做到这一点，但它不起作用。这是我在客户端处理请求的代码。

$(function () 
    $('.subForm').on('submit', function (e) 
        $.ajax(
            type: 'post',
            url: 'http://localhost:3000/users/spec/register',
            data: $(this).serialize(),
            success:function(data)
                if(data.success)
                    location.href="http://localhost:3000/login"
                else
                    location.href="http://localhost:3000/signup"
                
              
        );
        e.preventDefault();
    );

        $('.personAuth').on('submit', function (e) 
            $.ajax(
                type: 'post',
                url: 'http://localhost:3000/person/register',
                data: $(this).serialize(),
                success:function(data)
                    if(data.success)
                        location.href="http://localhost:3000/login"
                    else
                        console.log("Chexav");
                        location.href="http://localhost:3000/signup";

                    
                
            );
            e.preventDefault();
        );
        $('.companyAuth').on('submit', function (e) 
            $.ajax(
                type: 'post',
                url: 'http://localhost:3000/company/register',
                data: $(this).serialize(),
                success:function(data)
                    if(data.success)
                        location.href="http://localhost:3000/login"
                    else
                        location.href="http://localhost:3000/signup"
                    
                
            );
            e.preventDefault();
        );
        $('.logInForm').on('submit', function (e) 
            $.ajax(
                type: 'post',
                url: 'http://localhost:3000/users/authenticate',
                data: $(this).serialize(),
                success:function(data)
                    console.log(data);
                    if(data.token)
                        localStorage.setItem("Authorization",data.token);
                        $.ajax(
                            type:'get',
                            url:'http://localhost:3000/users/user',
                            beforeSend: function(xhr)xhr.setRequestHeader('auth', localStorage.getItem("Authorization"));,
                            success:location.href="http://localhost:3000/users/user"
                        )
                    
                    
            );
            e.preventDefault();
        );

    );  

在中间件中的身份验证路由之后，我想从身份验证头中获取令牌

 router.post('/authenticate', (req, res,next) => 
        const email = req.body.email;
        const password = req.body.password;
        Model.findUser(email, (err, user) => 
          if(err) throw err;
          if(!user)
            return res.json(success: false, msg: 'User not found');
          
          Model.comparePassword(password, user.password, (err, isMatch) => 
            if(err) throw err;
            if(isMatch)
              let payload=
                name:user.name,
                email:user.email_num,
                role:user.role,
                deleted:user.deleted,
                isActive:user.isActive,
                created:user.created,
              ;
              let token = jwt.sign(payload,config.JWT_SECRET,
                  expiresIn:1440
              );

                Model.saveToken(email,user.role,token,(err,success)=>
                    if(err) return err;
                    console.log("Success");
                    // res.cookie('Authorization',token);
                    res.json ( success: true, token: token );
                ); 


             else 
              return res.json(success: false, msg: 'Wrong password');
            
      );
   );
// res.redirect("/user");
 );

 router.use(function(req, res, next) 
    // console.log(req.headers);
    let token = req.headers['auth'];
     console.log(typeof(req.headers['auth']));
      if (token) 
        jwt.verify(token, config.JWT_SECRET, function(err, decoded)       
          if (err) 
              console.log(err);
            return res.json( success: false, message: 'Failed to authenticate token.' );    
           else 
            req.decoded = decoded;    
            next();
            // res.render("user");
          
        );
       else 
        return res.status(403).json( 
            success: false, 
            message: 'No token provided.' 
        );

      
    );

router.get("/user", (req,res)=>
    res.render("user");
); 

这是带有数据库的模型和函数

const mongoose = require ("mongoose");
const Spec = require("./specialist");
const Person = require("./person");
const Company = require("./company");
const bcrypt = require("bcryptjs");

module.exports.findUser=function(username,callback)
    let query = email_num:username;
    Spec.findOne(query,(err_spec,spec_user)=>
        if(err_spec) throw err_spec;
        if(!spec_user)
            Person.findOne(query,(err_person,person_user)=>
                if(err_person) throw err_person;
                if(!person_user)
                    Company.findOne(query,(err_company,company_user)=>
                        if(err_company) throw err_company;
                        if(!company_user)
                            return console.log("Error User Not Found");
                        
                        return callback(null,company_user);
                    );
                
                return callback(null,person_user);
            );
        
        return callback(null,spec_user);
    );
;
module.exports.comparePassword = function(candidatePassword, hash, callback)
    bcrypt.compare(candidatePassword, hash, (err, isMatch) => 
    if(err) throw err;
    callback(null, isMatch);
    );
;
module.exports.saveToken = function(username,role,token,callback)
    let query = email_num:username;
    let updateToken=updatedToken:token;

    if(role==="Person-User")
        Person.findOneAndUpdate(query,updateToken,callback);
    else if(role==="Specialist-User")
        Spec.findOneAndUpdate(query,updateToken,callback);
    else if(role==="Company-User")
        Company.findOneAndUpdate(query,updateToken,callback);
    else
        console.log("Something went goes wrong");
    

我使用 mongodb，我有三个集合，我用这段代码来处理所有这些集合。

中间件中的

console.log(typeof(req.headers['auth'])) 在未定义之后带来了字符串，我找不到原因。我也知道我可以用 cookie 做到这一点，但我想仅使用本地存储以另一种方式执行此操作。 感谢您的帮助，对语言错误深表歉意）））））

【问题讨论】：

问题是中间件不工作，找不到token，带来token不提供

saveToken 函数中 token 的值是多少？ res.json ( success: true, token: token );

token 是 string saveToken 只是一个函数，它接受 token 并发送到数据库并发送从路由获取的第二个参数（token），对不起，我没有解释这个函数。谢谢关注！！！！！！

你没有回答这个问题...什么是标记 VALUE，而不是数据类型 ;)

您使用的是哪个版本的 express？在 4.x 中获取标头值的方法是 req.get('auth') 见expressjs.com/en/api.html

【参考方案1】：

这对我有用：

在服务器端：

router.use(function(req, res, next)
  let token = req.headers["auth"];

  console.log("Token 1 "+token);
  req.decoded = token;
  return next();
);

router.get("/a", function(req, res)
  console.log("Token 2 "+req.decoded);
  return res.status(200).json();
);

然后在前面发送这个：

localStorage.setItem("Authorization","sdfsdf");
$.ajax(
     type:'get',
     url:'http://badasse.com/a',
     beforeSend: function(xhr)xhr.setRequestHeader('auth', localStorage.getItem("Authorization"));,
     success:location.href="https://www.google.fr"
);

好的值在控制台中正确显示

【讨论】：

同样的问题来了，我尝试 console.log(req.headers) 并返回 2 个值，一个带有 auth 标头，第二个没有 auth 标头，这就是为什么 console.log(token) 返回两个值一个令牌秒未定义。它发送到请求一个带有身份验证头的第二个没有。我想我发现了问题出在哪里，但为什么我不知道。

好的，我发现，在请求处理程序中，使用 ajax 获取请求我发送 auth 标头，但在成功属性 location.href 中没有 auth 标头，我如何发送请求 location.href="@ 987654321@" 带有 auth 标头。

如果您将用户重定向到其他页面，则无法设置自定义标题。您必须通过 cookie / GET 变量或 POST 变量传递值