利用node.js里面的jsonwebtoken包来实现一个登录购物车鉴权(点击购物车时，判断有没有登录)
html页面：
实现的效果，点击登录,通过ajax，让服务器生成一个token,客服端接收到数据后存在localStorage，购物车按钮发送请求时,headers设置请求头一个属性：token：值就是localStorage里面的值值或者为null,利用jwt.verify判断token是否存在，或者被篡改
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./jquery.js"></script>
</head>
<body>
<button id="btn1">登录</button>
<button id="btn2">购物车</button>
<script>
$('#btn1').click(function(){
$.ajax({
url:'/login',
dataType:'json',
success:(data)=>{
console.log(data)
window.localStorage.setItem('token',data.token)
},
error:(res)=>{
console.log(res)
}
})
})
$('#btn2').click(function(){
$.ajax({
url:'/list',
headers:{
token:localStorage.getItem('token')
},
success:(data)=>{
console.log(data)
}
})
})
</script>
</body>
</html>
app.js
const express=require('express')
const jwt=require('jsonwebtoken')
const app=express()
//
app.use(express.static('public'))
//权限
app.all('*',function(req,res,next){
// console.log(res)
console.log(req.path)
if(req.path!='/login'){
let token=req.headers.token;
jwt.verify(token,'sz',function(err,data){
if(data&&data.banji){
console.log(data)
next()
}else{
res.send('请求不合法')
}
})
}else{
next()
}
})
//登录
app.use('/login',function(req,res,next){
var token=jwt.sign({"banji":2111},'sz');
res.send({token})
})
//列表
app.use('/list',function(req,res,next){
res.send({success:'hello'})
})
app.listen(5050,()=>{
console.log('http://localhost:5050')
})
注意事项
- token的引入
客户端频繁向服务端请求数据
服务端频繁去数据库查询用户名的密码,并进行对比
判断用户是否有权限请求接口数据
有没有一种方法可以不用频繁进行数据库验证
token应运而生
- token的目的
减轻服务器的压力
减少频繁的查询数据库
- token从哪里来
token是服务器产生的
当用户登录时,或者调用指定接口是,会返回token给客户端用户
客户端用户收到token后
保存在前端(比如:localStorage)
之后再请求其他有访问权限的后端接口时
需要把token携带上传递给后端进行验证
- 如何把token传递至后端
这根据后端的要求
通常会把token放在headers中进行传递
