Javascript 如何将令牌设置为本地存储或cookies，以便允许用户访问某些网页

我正在尝试构建一个身份验证系统，所以，我使用了node、mysql、express，所以现在我只是保存并检查数据库中的用户是否可以访问，但现在我添加了JWT，所以现在我希望这个JWT令牌存储在localstorage或cookies中，那么，有人能指导我怎么做吗

这是我的身份验证控制器.js

var Cryptr = require('cryptr');
cryptr = new Cryptr('myTotalySecretKey');
var express = require('express');
const ap = express();
var jwt = require('jsonwebtoken');
var connection = require('./../config');

module.exports.authenticate = function (req, res) {
    var email = req.body.email;
    var password = req.body.password;


    connection.query('SELECT * FROM users WHERE email = ?', [email], function (error, results, fields) {
        if (error) {
            res.json({
                status: false,
                message: 'there are some error with query'
            });
        } else {

            if (results.length > 0) {
                decryptedString = cryptr.decrypt(results[0].password);
                if (password == decryptedString) {
                    jwt.sign({ email, password },
                        'secretkey',
                        { expiresIn: '10days' },
                        (err, token) => {
                            console.log('token:' + token);
                            module.exports = token;
                            console.log(token);
                            res.redirect('/home.html');
                        }
                    );

                } else {
                    res.redirect('/login.html');
                    console.log("Wrong Input");

                }

            }
            else {
                res.redirect('/login.html');
            }
        }
    });
};

function(login){
   return fetch('/myApi/authenticate',{
         method: 'POST',
         headers: {
            'Content-Type': 'application/json',
         },
         body: JSON.stringify(login)
      }).then(result=>result.json()).then(data=> window.localStorage.setItem('token', data.token))
} 

//`login` argument should be an object and should be like {username: 'user username', password: 'user password'}

---

现在我想将令牌值传递到本地存储或cookies，以便限制某人访问页面，我是node js的新手，因此需要任何帮助。首先，我应该通知您，不要在jwt有效负载中放置密码之类的秘密内容。因为有效负载的值可以轻松访问，您可以尝试在jwt.io站点中复制粘贴jwt并查看有效负载

在cookie中设置jwt，如下所示，这将使用：

另外，如果您想使用localStorage您可以在header中设置jwt，然后在代码中从登录请求的header中获取jwt并将其保存在localStorage中，之后您应该在所有其他请求中将其作为header传递，但这种方法对于api调用（如使用react或vue时）是一种更好的解决方案

res.set({x-token: generated_token});

// In your code get 
// get token from response
localStorage.setItem('token', token);
// now whenever calling api pass token as header

---

为了让用户存储cookie，可以使用标题。来自MDN：

设置Cookie:=

为了使用Express传递标头，您可以使用

res.set（）

，例如

res.set（“set Cookie”，“Token=“+Token”）

。我还建议您使用

HttpOnly

cookie指令，因为从您的帖子中可以看出，您没有直接通过Javascript访问此令牌，您只想在客户端请求网页时检查它：

res.set（“set cookie”，“token=“+token+”；HttpOnly”）

---

当客户端请求资源时，它将向您发送

Cookie

头。您可以使用

req.header（'Cookie'）

检查此标头，如果用户经过身份验证，则输出将为

“Token=“

”。然后，您可以检查此令牌的真实性。

我向您展示了一种使用jwt令牌的解决方案，您可以选择另一种方式：

后端文件，例如api.js

let jwt             = require('jsonwebtoken') 
let secret          = 'yourSecret'; //secret key necessary to encode token
let Cryptr = require('cryptr');
let cryptr = new Cryptr('myTotalySecretKey');

module.exports = function(router,upload) {

 function tokenAuth(req, res, next){
   let token = req.body.token || req.body.query || req.headers['x-access-token']
   if(token){
     jwt.verify(token, secret, function(err,decoded){
        if(err){
            res.json({ authenticated: false, message:'Invalid token'})
        } else {
            req.decoded = decoded;
            next()
        }
    })
  } else {
    res.json({success:false, message:'No token provided'});
  }
}
router.post('/authenticate', function(req, res){
  connection.query('SELECT * FROM users WHERE email = ?', [email], function (error, results, fields){
  if(error) {
    res.json({ success:false, message: err })
  }
  if(!results.length){
   res.json({success:false, message:'User no found'})
  } else if (results.length>0){ 
   if(!req.body.password){
     res.json({success:false, message:'Password was not provided'});                    
   } else {  
     var validPassword = cryptr.decrypt(results[0].password);
     if(validPassword === req.body.password){                  
       res.json({success:false, message:'Incorrect password'})
     }  else {
      var token = jwt.sign({username: results[0].username, email: results[0].email}, secret, {expiresIn: '24h'})
      res.json({success:true, message:'You have logged in correctly!', token: token })
     }
    }
   }
  })
 })
 //If you want create a route for authenticated users for example comment posts, you can use our `tokenAuth function`
 router.post('/post/comment',tokenAuth,function(req,res){
   //access only for authenticated users
 }
return router
} 

此

tokenAuth

函数将在仅限经过身份验证的用户的路径中使用

服务器文件，例如server.js

const express = require('express');
const app = express();
const port = process.env.PORT || 80;
const http = require('http').Server(app);
const routes = require(path_to_api.js)(router);

app.use('/myApi', routes)
//***Here you should implement more details about your project such as routes, body parsers and other middlewares*****//
//Connect to your database
http.listen(port, ()=> console.log(`Server running on ${port}`))

前端文件，例如controller.js

var Cryptr = require('cryptr');
cryptr = new Cryptr('myTotalySecretKey');
var express = require('express');
const ap = express();
var jwt = require('jsonwebtoken');
var connection = require('./../config');

module.exports.authenticate = function (req, res) {
    var email = req.body.email;
    var password = req.body.password;


    connection.query('SELECT * FROM users WHERE email = ?', [email], function (error, results, fields) {
        if (error) {
            res.json({
                status: false,
                message: 'there are some error with query'
            });
        } else {

            if (results.length > 0) {
                decryptedString = cryptr.decrypt(results[0].password);
                if (password == decryptedString) {
                    jwt.sign({ email, password },
                        'secretkey',
                        { expiresIn: '10days' },
                        (err, token) => {
                            console.log('token:' + token);
                            module.exports = token;
                            console.log(token);
                            res.redirect('/home.html');
                        }
                    );

                } else {
                    res.redirect('/login.html');
                    console.log("Wrong Input");

                }

            }
            else {
                res.redirect('/login.html');
            }
        }
    });
};

function(login){
   return fetch('/myApi/authenticate',{
         method: 'POST',
         headers: {
            'Content-Type': 'application/json',
         },
         body: JSON.stringify(login)
      }).then(result=>result.json()).then(data=> window.localStorage.setItem('token', data.token))
} 

//`login` argument should be an object and should be like {username: 'user username', password: 'user password'}

我尝试过这个res.set（“set Cookie”，“Token=“+Token”）；res.redirect（'/home.html'）；但我无法将cookie设置为它，因为我在开发者应用程序控制台中看到它仍然是空的，使用res.cookie（“jwt”，生成的_cookie）；res.redirect（'/home.html'）；使我的应用程序在我放入凭据后不响应