无感刷新token(vue3与nodejs版本)-阿里云开发者社区

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

2024-01-16 219

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 无感刷新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>