前端生存登录信息-jwt的使用
node+express开辟中，常常会使用后端session+前端cookie方式来生存登录信息，如果后端接纳多服务器的话，session要共享还得接纳redis来生存session。而session多少照旧有一些存储和盘算开销的；别的前端，用cookie来存放sessionid大概其他一些登录信息，而一些禁用了cookie的场景，大概一些自己就不是欣赏器的应用的话，在cookie中生存登录信息就不太实用了。这种情况下，可以思量接纳jwt存当地存储方式来对应。
以下给出一个简朴的例子。
通过nginx反向署剃头布，nginx.conf里干系设置是如许的:
location /app/ {
proxy_pass http://jwtdemo.dgiij.org:3000/;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $host;
}
后端服务js
const express = require('express')
const app = express()
const jwt = require('jsonwebtoken')
var { expressjwt: ejwt }= require('express-jwt')
const jwtSecretKey= 'ParisOlympics2024';
const jwtexpiresIn= '12h'
const app_prefix="https://jwtdemo.dgiij.org/app"
const loginurl="https://jwtdemo.dgiij.org/app/login.html&redurl="
var localusers = require("./localusers.json");
app.use("/", express.static("html/app"));
app.use("/pub", express.static("html/pub"));
app.use(ejwt({ secret: jwtSecretKey, algorithms: ["HS256"]}).unless({ path: [/^\/login/,/^\/pub/,/^\/index/] }))
app.use(function (err, req, res, next) {
if (err.name === 'UnauthorizedError') {
let redurl=app_prefix+ req.originalUrl;
res.redirect(loginurl+redurl);
}
})
app.post('/login',express.json(), (req, res) => {
let obj=req.body;
let matchuser=localusers.find(item=>((item.userid==obj.uid)&&(item.password==obj.upw)));
if (matchuser!=undefined) {
let clientip=req.header("x-forwarded-for")?req.header("x-forwarded-for"):req.ip;
let userinfo={"userid":matchuser.userid,"username":matchuser.username,"login_ip":clientip}
let token = jwt.sign(userinfo, jwtSecretKey, { expiresIn: jwtexpiresIn})
res.json({ "code": 200, "jwt": token })
}
else { res.json({ "code": 401, "msg": '登录失败' }) }
})
app.get('/getuserinfo', (req, res) => {
res.json({ "code": 200, userinfo: req.auth })
})
app.listen(3000, console.log('server is running on port 3000'))
前端登录页面(html/app/login.html)：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jwt demo login</title>
<script src="pub/axios.min.js"></script>
<script src="pub/jquery-3.6.1.min.js"></script>
</head>
<body>
<input type="text" id="uid" name="uid" placeholder="用户名">
<input type="password" id="upw" name="upw" placeholder="密码">
<button>账号密码登录</button>
</body>
<script>
let reg = new RegExp("(^|&)" + "redurl" + "=([^&]*)(&|$)","i");
var redurl = location.search.substr(1).match(reg);
$("#login").click(()=>{
if ((document.getElementById("uid").value.trim()=="")||(document.getElementById("upw").value.trim()=="")) { alert("请输入用户名和密码！"); }
else {
let nuid=document.getElementById("uid").value.trim().toLowerCase();
axios.post("/app/login",{"uid": nuid,"upw": document.getElementById("upw").value.trim()}).then(resp=>{
let obj=resp.data;
if (obj.code==200) {
localStorage.setItem("jwt", obj.jwt);
document.location=((redurl==null)?"/app/index.html":redurl);
}
else { alert(obj.msg); }
}).catch(errp2 => { console.log(errp2); alert("app服务错"); });
}
});
</script>
</html>
前端app页面（html/app/index.html）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jwt demo app</title>
<script src="pub/axios.min.js"></script>
<script src="pub/jquery-3.6.1.min.js"></script>
</head>
<body>
<span> 当前会话用户：</span>
<span name="loginname" id="loginname"></span>
<br>
<br>
</body>
<script>
axios.defaults.headers.common['Authorization'] ='Bearer ' + localStorage.getItem('jwt');
axios.get("/app/getuserinfo").then(res=>{
let obj=res.data;
document.getElementById("loginname").innerHTML = obj.userinfo.username ;
}).catch(errp => { console.log(errp); alert("app服务错，请稍后再刷新页面"); });
</script>
</html>
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！qidao123.com:ToB企服之家，中国第一个企服评测及软件市场,开放入驻,技术点评得现金
页:
[1]