工作之余,学习JWT方式的登录和授权,思考使用nodejs作为服务器,使用vue作为前端,实现前后端分离,耗时一月,从2024年4月上旬至5月上旬,完成代码和文章撰写,作为阶段学习的总结。
使用jwt工作流程如下:
1、发送登录请求,携带username,password
2、进行验证,验证通过返回JWT
3、请求头携带JWT发请求到应用服务
4、验证携带过来的JWT的合法性
5、验证通过返回,执行后续操作
前端代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.staticfile.net/axios/1.5.0/axios.min.js"></script>
<script>
var instance=axios.create({
baseURL: "http://127.0.0.1:3000"
})
let token=""
instance.interceptors.request.use(config=>{
if(localStorage.getItem('token')){
token=localStorage.getItem('token')
config.headers.token=token
}
return config
},error=>{ return Promise.reject(error)})
function login(){
let datainfo={"username":"admin","password":"123456"}
instance.post("/user/login",datainfo).then(res=>{
if(res.data.code==1){
console.log(res.data)
// location.href="main1.html"
localStorage.setItem("token",res.data.token)
}
})
}
function isLogin() {
instance.get("/user/isLogin").then(res=>{
console.log(res.data)
return res.data
})
}
</script>
</head>
<body>
<button onclick="login()">登录</button>
<button onclick="isLogin()">验证</button>
</body>
</html>
后端代码
let express = require('express')
//引入cors模块
const cors=require('cors')
//引入jwt
const JWTManager=require("./jwt.js")
const crypto=require("crypto")
//引入user
const user=require("./user.js")
//配置jwt参数
const secretKey="12345"
const jwtManager=new JWTManager(secretKey,{expiresIn: "1h"})
//启动服务器
let app = express()
app.listen(3000, () => {
console.log('服务器已启动..端口3000.')
})
//使用中间件
app.use(express.json())
app.use(express.static('./views'))
//配置跨域
app.use(cors({
//允许跨域的服务器地址
origin: ["http://127.0.0.1:3000","http://localhost:3000"],
//使用cookie时需要设置为true
credentials: true
}))
//登录
app.post('/user/login', (req, res) => {
var payload=req.body
var password=crypto.createHash("md5").update(payload.password).digest("hex")
//验证用户登录
user.login(payload.username,password,(err,user)=>{
if(err) return console.log(err)
let data={}
if(user!=undefined){
data={
"id":user.id,
"username":user.username
}
let token=jwtManager.generateToken(data)
data={
"code" : 1,
"message":"请求成功",
"token": token,
"data" : user }
console.log(data)
res.status(200).send(data)
} else {
console.log("用户名或密码不正确")
}
})
})
//验证
app.get('/user/isLogin',(req,res)=>{
let token=req.headers.token
let decoded=""
let data={}
try{
decoded=jwtManager.verifyToken(token)
data={
"code": 2,
"message":"请求成功"
}
console.log(data)
res.status(200).send(data)
} catch (error) {
data={
"code": 2,
"message":"请求失败"
}
//console.log(error.message)
console.log(data)
res.status(200).send(data)
}
})
//测试
app.get('/hello',(req,res)=>{
let data={"code":2,"message":"请求成功","data" :{ "id":1 ,"username":"cst","address":"河南新郑和庄"}}
res.status(200).send(data)
})