梦见Utaoki 2023-02-14 22:48 采纳率: 85.2%
浏览 20
已结题

nodejs使用jsonwebtoken如何实现浏览器保存服务器发送的token,且刷新不掉登录

还有

const db=  require('../db/index')
const bcrypt = require('bcryptjs')
const jwt = require('jsonwebtoken')
const config = require('../config')

exports.login = (req,res)=>{
  //接收表单数据
  //定义sql
  const userinfo = req.body
  const sql = `select * from ev_users where username=?`
  db.query(sql,userinfo.username,(err,results)=>{
    if(err) return res.cc(err)
    //执行sql成功
    if(results.length !==1) return res.cc('登录失败1!')
    const compareResult =bcrypt.compareSync(userinfo.password, results[0].password)
    if(!compareResult) return res.cc('登陆失败2')
//在服务器生成token的字符串
const user = {...results[0], password:'',user_pic:'' }
//console.log(user)
//对用户信息进行加密,生成token字符串
const tokenStr = jwt.sign(user,config.jwtSecretKey,{expiresIn:config.expiresIn})
console.log(tokenStr)
console.log(results[0].username)
    res.send(
      {
       status:0,
        token:'Bearer '+tokenStr,
      message:'登录成功!',
      result:'欢迎你!'+results[0].username}

      )
}
  
  )
}

前端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户登录</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.3/jquery.js"></script>
    
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css">
 

<script src="https://cdn.staticfile.org/popper.js/2.9.3/umd/popper.min.js"></script>
 

<script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.min.js"></script>
</head>
<body>
    <div style="width:130px;margin:0 auto;font-size:xx-large;margin-top: 20px;">开源社区</div>
    <div class="container" style="width: 250px;margin-top: 20vh;border:1px solid rgba(128, 128, 128, 0.831);border-radius: 20px;padding:30px;" > 
        <h5>用户登录</h5><h5 id="h3"></h5><form action="" class="" onsubmit="return false">
    <input type="text" name="" id="user" class="form-control" placeholder="用户名">
    <br>
    <input type="text" name="" id="pwd" class="form-control" placeholder="密码">
    <button class="btn btn-primary" type="submit" style="margin-top: 20px;">登录</button>
</form></div>
<script>
     function func(event){
            event.preventDefault();
        }
    document.querySelector('.btn').onclick = function(){
         const name = document.querySelector('#user').value
    const pwd = document.querySelector('#pwd').value
    const xhr = new XMLHttpRequest()
    xhr.open('post','http://47.92.228.109:3007/api/login')
    xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
    xhr.send(
        'username='+name+'&password='+pwd
    )
    xhr.onreadystatechange = function(){
        if(xhr.readyState ===4){
            if(xhr.status >=200 && xhr.status <300){
                function getjson(key){
                let  val = xhr.responseText
                var finval = jQuery.parseJSON(val)
                   console.log(finval)
                    console.log(typeof(finval))
                    var eValue=eval('finval.'+key)
                    alert(eValue);
                }
                function logininfo(key){
                let  val = xhr.responseText
                var finval = jQuery.parseJSON(val)
                   //console.log(finval)
                    //console.log(typeof(finval))
                    var eValue=eval('finval.'+key)
                    if(eValue != undefined){
                document.querySelector('#h3').append(eValue)
                $('
登出
'
).appendTo($('#h3')); } } getjson('message') logininfo('result') }} }} function dengchu(){ window.location.href = './login_in.html' }
</script> </body> </html>
  • 写回答

3条回答 默认 最新

  • 社区专家-Monster-XH 2023-02-14 23:02
    关注

    服务器使用jsonwebtoken生成Token并在响应中发送它。要将Token存储在浏览器中,可以使用以下代码:

    // 在响应中保存Token
    res.send({
      status: 0,
      token: 'Bearer ' + tokenStr,
      message: '登录成功!',
      result: '欢迎你!' + results[0].username
    });
    
    // 前端中获取Token并保存到localStorage中
    xhr.onreadystatechange = function() {
      if (xhr.readyState === 4) {
        if (xhr.status >= 200 && xhr.status < 300) {
          const response = JSON.parse(xhr.responseText);
          if (response.status === 0) {
            const token = response.token;
            localStorage.setItem('token', token);
            // 显示欢迎信息
            document.querySelector('#h3').textContent = response.result;
            $('<button onclick="dengchu()">登出</button>').appendTo($('#h3'));
          } else {
            alert(response.message);
          }
        }
      }
    };
    
    
    

    然后,每次向服务器发出请求时,您可以将保存在本地存储中的Token添加到请求头中:

    
    xhr.setRequestHeader('Authorization', localStorage.getItem('token'));
    
    

    Token应该在服务端进行验证,并且应该在每次请求时发送,并且应该设置一个过期时间,以便在过期之后需要重新登录。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题?

问题事件

  • 系统已结题 2月23日
  • 已采纳回答 2月15日
  • 创建了问题 2月14日

悬赏问题

  • ¥15 powerbuilder出现这样的报错
  • ¥15 h3.6m 人类行为预测论文复现
  • ¥50 wordpress项目注册报失败刷新后其实是成功状态,请求排查原因
  • ¥20 linxu服务器僵尸进程不释放,代码如何修改?
  • ¥15 pycharm激活不成功
  • ¥40 如果update 一个列名为参数的value
  • ¥15 基于51单片机的水位检测系统设计中LCD1602一直不显示
  • ¥15 OCS2安装出现问题,请大家给点意见
  • ¥15 ros小车启动launch文件报错
  • ¥15 vs2015到期想登陆但是登陆不上