工作之余,学习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"}