vue+redis完成认证授权

在Vue.js与Redis完成鉴权的场景中，通常的流程是：

1. 用户登录，后端使用Redis存储生成的Token。
2. 用户登录后，后端返回Token给前端。
3. 前端将Token存储在本地，如localStorage或vuex。
4. 前端在后续的请求中携带Token。
5. 后端检查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并存储到