在后端使用JSON web Token作登录验证时,前端向后端发送了username和password,后端怎么接收这些数据,接收了这些数据后,用户会获取到一个token,用户应该怎么使用这个token来进行登录,请举出一个携带token的登录示例
时间: 2023-06-15 20:06:39 浏览: 93
ExampleRazorLoginUsingJWT:使用 Razor 语法创建的示例登录页面,使用 JSON Web 令牌 (JWT) 进行身份验证
后端可以通过HTTP请求的body部分或者query参数的形式接收前端发送的username和password。接收到这些数据之后,后端需要对用户名和密码进行校验,如果校验成功,则生成一个JSON Web Token (JWT) 并返回给前端。
前端在收到JWT之后,一般会将其存储在LocalStorage或者SessionStorage当中。在后续的请求中,前端需要在请求头中携带这个JWT,以便后端进行身份验证。具体的登录示例可以参考下面的代码:
前端登录代码示例:
```
// 发送登录请求
axios.post('/api/login', {
username: 'username',
password: 'password'
}).then(response => {
// 将JWT存储到LocalStorage中
localStorage.setItem('jwt', response.data.token)
})
// 发送携带JWT的请求
axios.get('/api/user', {
headers: {
'Authorization': 'Bearer ' + localStorage.getItem('jwt')
}
}).then(response => {
console.log(response.data)
})
```
后端生成JWT代码示例:
```
const jwt = require('jsonwebtoken')
// 校验用户名和密码
if (username === 'username' && password === 'password') {
// 生成JWT
const token = jwt.sign({ username: username }, 'secretKey', { expiresIn: '1h' })
// 返回JWT
res.json({ token: token })
} else {
res.status(401).json({ error: '用户名或密码错误' })
}
```
后端校验JWT代码示例:
```
const jwt = require('jsonwebtoken')
// 验证JWT
const token = req.headers.authorization.split(' ')[1]
jwt.verify(token, 'secretKey', (err, decoded) => {
if (err) {
res.status(401).json({ error: '无效的token' })
} else {
// 在decoded中可以获取到存储在JWT中的payload
console.log(decoded.username)
next()
}
})
```
阅读全文