在Vue.js与Redis完成鉴权的场景中，通常的流程是：
- 用户登录，后端使用Redis存储生成的Token。
- 用户登录后，后端返回Token给前端。
- 前端将Token存储在本地，如localStorage或vuex。
- 前端在后续的请求中携带Token。
- 后端检查Token的有效性，如果Token有效则允许访问资源。
以下是一个简化的例子：
后端（使用Node.js和Express框架）:
const express = require('express');
const redis = require('redis');
const jwt = require('jsonwebtoken');
const app = express();
const redisClient = redis.createClient();
app.post('/login', (req, res) => {
// 假设用户验证成功
const token = jwt.sign({ userId: 1 }, 'secret', { expiresIn: '1h' });
redisClient.set(token, ''); // 存储Token到Redis
res.json({ token }); // 返回Token给前端
});
app.get('/protected', authenticateToken, (req, res) => {
// 受保护的资源
res.json({ message: 'Authorized content' });
});
function authenticateToken(req, res, next) {
const authHeader = req.headers['authorization'];
const token = authHeader && authHeader.split(' ')[1];
if (token == null) return res.sendStatus(401); // 如果没有Token，返回未授权
redisClient.get(token, (err, data) => {
if (err) return res.sendStatus(500); // 如果Redis查询出错，返回服务器错误
if (data) {
jwt.verify(token, 'secret', (err, decoded) => {
if (err) return res.sendStatus(401); // 如果Token验证失败，返回未授权
req.decoded = decoded; // 如果Token有效，将解码信息添加到请求
next(); // 继续执行后续中间件
});
} else {
return res.sendStatus(401); // 如果Token在Redis中不存在，返回未授权
}
});
}
app.listen(3000, () => {
console.log('Server is running on port 3000');
});前端（Vue.js）:
// Vue组件中登录方法
methods: {
login() {
axios.post('/login')
.then(response => {
localStorage.setItem('token', response.data.token); // 存储Token
this.$router.push('/protected'); // 跳转到受保护的页面
})
.catch(error => {
console.error('Login failed', error);
});
}
}
// 在Vue的axios拦截器中设置请求头
axios.interceptors.request.use(config => {
const token = localStorage.getItem('token');
if (token) {
config.headers.Authorization = `Bearer ${token}`; // 在请求头中携带Token
}
return config;
}, error => {
return Promise.reject(error);
});
// 在路由守卫中检查用户是否已经登录
router.beforeEach((to, from, next) => {
const publicPages = ['/login'];
const authRequired = !publicPages.includes(to.path);
const token = localStorage.getItem('token');
if (authRequired && !token) {
return next('/login');
}
next();
});在这个例子中，前端用户登录后，后端生成Token并存储到