无感刷新token(vue3与nodejs版本)

使用vue3与nodejs实现无感刷新技术

为什么要使用无感刷新

首先说一下为什么要写无感刷新token，分为以下几点。
1.增强用户体验：无感刷新允许应用程序在后台自动更新访问令牌，无需用户进行任何操作。这样可以确保用户的会话保持活动状态，不会被意外中断或需要重新登录，提供更好的用户体验。
2.提高安全性：访问令牌通常具有较短的有效期，以减少令牌泄露的风险。通过使用无感刷新，可以在访问令牌快要过期时自动获取新的令牌，减少了令牌过期导致的潜在的安全漏洞。
3.减少对用户交互的需求：传统的身份验证流程通常需要用户定期输入用户名和密码来获取新的访问令牌。而无感刷新使得应用程序能够定期获取新的令牌，而无需用户进行额外的操作。
4.简化开发和维护：通过使用无感刷新机制，开发人员可以更轻松地实现令牌的管理和更新逻辑。无感刷新可以集成到应用程序的身份验证流程中，减少了开发和维护的复杂性。

后端代码的处理

然后下面我要展示我在后端做了哪些处理
1.我使用是nodejs中的express框架来实现
1.我们要引入一些我们需要的库

const express = require('express');
const jwt = require('jsonwebtoken');

const app = express();
const accessTokenSecret = 'your-access-token-secret';
const refreshTokenSecret = 'your-refresh-token-secret';
const users = [
  { username: 'admin', password: 'password' },
  // 可在此处添加更多用户
];

然后我们写入一个登录接口，下述是代码

// 登录接口，验证用户名和密码，生成并返回访问令牌和刷新令牌
app.post('/login', (req, res) => {
  const { username, password } = req.body;
  const user = users.find(u => {
    return u.username === username && u.password === password;
  });

  if (user) {
    const accessToken = jwt.sign({ username: user.username }, accessTokenSecret, { expiresIn: '30s' });
    const refreshToken = jwt.sign({ username: user.username }, refreshTokenSecret);
    res.json({ accessToken, refreshToken });
  } else {
    res.status(401).json({ error: '用户名或密码错误' });
  }
});

下面是刷新指令接口的实现

// 使用 JSON 解析器中间件解析请求体
app.use(express.json());

// 刷新令牌接口
app.post('/token', (req, res) => {
  // 从请求体中获取刷新令牌
  const { refreshToken } = req.body;

  // 如果刷新令牌不存在，则返回 401 状态码
  if (!refreshToken) {
    return res.sendStatus(401);
  }

  // 验证刷新令牌，并获取用户信息
  jwt.verify(refreshToken, refreshTokenSecret, (err, user) => {
    // 如果刷新令牌验证失败，则返回 403 状态码
    if (err) {
      return res.sendStatus(403);
    }

    // 生成新的访问令牌，并将其返回给客户端
    const accessToken = jwt.sign({ username: user.username }, accessTokenSecret, { expiresIn: '30s' });
    res.json({ accessToken });
  });
});

// 启动服务器
app.listen(3000, () => {
  console.log('服务器正在运行，端口：3000');
});

这些就是大致的后端的代码

前端代码的处理

现在我们开始写入vue3前端代码

<template>
  <div>
    <h1>无感刷新 Token 示例</h1>
    <div v-if="accessToken">
      <p>访问令牌：{{ accessToken }}</p>
      <p>刷新令牌：{{ refreshToken }}</p>
    </div>
    <button v-if="!accessToken" @click="login">登录</button>
    <button v-if="accessToken" @click="refreshToken">刷新令牌</button>
  </div>
</template>

<script>
import { reactive } from 'vue';
import axios from 'axios';

export default {
  setup() {
    const state = reactive({
      accessToken: '',
      refreshToken: ''
    });

    const login = () => {
      axios.post('http://localhost:3000/login', { username: 'admin', password: 'password' })
        .then(response => {
          state.accessToken = response.data.accessToken;
          state.refreshToken = response.data.refreshToken;
        })
        .catch(error => {
          console.error(error);
        });
    };

    const refreshToken = () => {
      axios.post('http://localhost:3000/token', { refreshToken: state.refreshToken })
        .then(response => {
          state.accessToken = response.data.accessToken;
        })
        .catch(error => {
          console.error(error);
        });
    };

    return {
      ...state,
      login,
      refreshToken
    };
  }
};
</script>

我们使用了 Axios 库发送 HTTP 请求。在 login 方法中，我们向后端的登录接口发送用户名和密码，如果验证通过，则将返回的访问令牌和刷新令牌保存在组件的数据中。在 refreshToken 方法中，我们向后端的刷新令牌接口发送刷新令牌，并将返回的新访问令牌保存在组件的数据中。

vue2＋nodejs实现无感刷新技术
到这里vue3＋nodejs实现无感刷新也就结束了，记得留下宝贵的赞哦