vite项目使用jtw加密token
时间: 2024-09-16 12:01:06 浏览: 9
Vite是一个现代的前端构建工具,它专注于快速启动和热更新,适合构建高性能的Web应用。JWT(JSON Web Tokens)是一种常用的用于认证和授权的标准协议,它允许服务器将信息安全地发送给客户端,并能在后续请求中验证。
在Vite项目中使用JWT加密Token的一般步骤如下:
1. 安装依赖:首先需要安装`jsonwebtoken`库,可以使用npm或yarn命令行工具:
```bash
npm install jsonwebtoken
# 或者
yarn add jsonwebtoken
```
2. 创建服务端API:在Vite的服务端设置中,当用户登录成功后,会生成一个JWT并返回给客户端。例如,使用Node.js和Express:
```javascript
const jwt = require('jsonwebtoken');
// 假设有个登录成功的处理函数
async function loginSuccess(user) {
const token = jwt.sign({ userId: user.id }, 'your-secret-key', { expiresIn: '1h' });
res.json({ token });
}
```
3. 客户端存储与验证:客户端接收到JWT后,通常将其存储在浏览器的本地存储或Cookie中。在每次向需要授权的API发送请求时,添加Authorization头部,携带Bearer前缀和JWT:
```javascript
fetch('/protected-resource', {
headers: {
Authorization: `Bearer ${localStorage.getItem('jwt')}`
},
})
.then(response => response.json())
```
4. 服务端验证:在处理受保护资源的API端点上,检查JWT是否有效:
```javascript
app.use(async (req, res, next) => {
try {
const token = req.headers.authorization?.split(' ')[1];
if (!token) return res.status(401).json({ error: 'Unauthorized' });
const decoded = await jwt.verify(token, 'your-secret-key');
req.user = decoded; // 将解码后的数据绑定到req上
next();
} catch (err) {
res.status(401).json({ error: 'Unauthorized or Invalid Token' });
}
});
```