提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
前言
提示:登录逻辑操作:
例如:在我们的项目练习中会出现登录操作,那么我们的每一个请求服务器怎么样才能知道我们是已经完成登录了呢?。
一、Token令牌是什么?
示例:oken令牌是一种表示用户身份的字符串,用于进行身份验证和授权,那么总而言之就是我们通过这个唯一标识的字符来完成重要的身份验证和授权机制,可以方便地实现用户身份验证和权限控制。
二、使用步骤
1.引入库
代码如下(示例):
npm i jsonwebtoken express-jwt//导入这两个模块
2.开始使用
代码如下(示例):
前端
首先我们验证客户端是否登录的逻辑是,通过我们每一次的后端请求,在请求投中包含我们本地已经缓存了的token令牌来进行验证,那么因此上呢我们就需要使用在前端localStorage,那么我们为什么可以不输入端口号写/login路由即可呢?,是因为我们在vue下载的axios组件中存在一个属性名为baseURL 他来控制我们每一次请求的地址将不需要我们自己手动去写,接着还需要写一个axios的拦截器,方便于我们每一次请求将不再需要手动在请求头中设置authorization(授权)具体可以看axios中文文档(https://www.axios-http.cn/)
//登录功能
submitForm() {
this.axios.post("/login", this.ruleForm).then((res) => {
if (res.data.code == 200) {
localStorage.setItem("token",res.data.token)
}
});
},
//默认的请求端口
axios.defaults.baseURL = 'http://127.0.0.1:3000/'
// 拦截器
axios.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
let token = localStorage.getItem("token")
if (token) {
config.headers.Authorization = "Bearer " + localStorage.getItem("token")
}
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
后端
在后端首先是在反登录页面,在登陆页面中我们要对前端传过来的数据进行判断,输入的是否是我我们用户表中存在的数据,如果是数据存在,则登陆成功,随后我们会使用jsonwebtoken来模块生成token随后将token发送到客户端,在客户端进行保存,在随后的所有请求都会包含这个token令牌,我们在这个express中间件中也会去判断验证令牌下面是具体代码和注释
//生成令牌
router.post("/login", async(req, res) => {
//通过mongoose来进行账号验证
let result = await user.find({ username: req.body.username, password: req.body.password })
if (result.length == 0) {
console.log("没有找到")
} else {
//生成随机令牌
let token = jwt.sign({
username:req.body.username//以username来生成,通过aaa这个口令以HS256来进行加密
}, "aaa", {
expiresIn:"1h"//1h是token的有效时间
})
//把token发送到前端,前端进行本地缓存
res.send({
code: 200,
token
})
}
})
// 令牌验证
app.use(expressJWT({
//解密
secret: "aaa",
//token加密对比
algorithms: ["HS256"]
}).unless({
// 什么情况下不需要token令牌执行
path: ["/login", { url: /^\/upload/, methods: ["GET"] }]
}))