token
Token从哪里来
==>Token是在服务端生成的,当客户端登陆时,或者调用接口的时候,会返回Token给客户,客户端接收到Token
==>保存在前端(localStorage)
==>之后再请求其他有访问权限的接口的时候,需要把Token携带上传递给后端进行访问
如何把token传递至后端呢?
==>这是根据后端的要求
==>通常会把token放在headers(请求头)里面
webServer.js
const express = require('express');
//导入token的包
const jwt = require('jsonwebtoken');
const {createProxyMiddleware} = require('http-proxy-middleware');
const app = express();
//开启静态资源服务器
app.use(express.static('./public'));
//路由拦截,统一验证token的正确性,如果不正确,不允许访问接口
app.get('*',function(req,res,next){
var url = req.url;
if(url!="/getToken"){
//token验证:需要前端在请求有访问权限的/list接口的时候要带上token
console.log(req.headers);//req的headers属性用户后去客户端发送的请求头信息,是一个json个格式
var token = req.headers.token;//获取到token;
//验证token的正确性
jwt.verify(token,'html5 2003',function(err,decode){
if(decode){
//如果解码成功得到{bar:'cc'},就是正确的token
next()
}else{
res.send({code:403,msg:'没有访问权限'})
}
})
}else{
//如果路由是'/getToken'直接进入下一个路由匹配的函数
next()
}
})
//有访问权限的接口
app.get('/list',function(req,res,next){
res.send({success:true})
})
//前端请求token,后端返回
app.get('/getToken',function(req,res,next){
var token = jwt.sign({bar:'cc'},'html5 2003');
res.send({
token:token
})
})
app.listen('8888')
token.html
<body>
<h1>Token</h1>
<button id="btn1">点击获取token</button>
<button id='btn2'>点击访问有权限显示的list接口</button>
<script>
//前端在访问有权限的接口之前,先获取token,保存在本地存储中
$('#btn1').click(function(){
$.ajax({
url:'/getToken',
success:function(data){
// console.log(data);
window.localStorage.setItem('token',data.token)
}
})
})
//访问有权限显示的list接口,把token携带在请求头里面
$('#btn2').click(function(){
$.ajax({
url:'/list',
headers:{
token:window.localStorage.getItem('token')
// token:'3984798379748734skf'
},
success:function(data){
console.log(data)
}
})
})
</script>
</body>
