夜猫子的知识栈
夜猫子
2025-03-10
目录

单token无限续期实现登录无感刷新

# 前言

上节我们基于双 token 实现了登录状态的无感刷新。

这当然是能实现功能的，很多公司也这样用。

但是双 token 实现起来还是挺麻烦的。

所以实际上单 token 自动续期的方式用的也非常多。

单 token 的原理也很简单，就是登录后返回 jwt，每次请求接口带上这个 jwt，然后每次访问接口返回新的 jwt，然后前端更新下本地的 jwt token。

比如这个 token 是 7 天过期，那只要 7 天内访问一次系统，就会刷新 token。

7 天内不访问系统，token 过期，就需要重新登录了。

这种方案也能实现无感刷新，而且代码简单的多。

# 准备

我们来写一下：

nest new single-token-refresh
1

进入项目，添加一个 user 模块：

nest g resource user --no-spec
1

加一个 login 的路由：

import { Body, Controller, Post } from '@nestjs/common';
import { UserService } from './user.service';
import { LoginUserDto } from './dto/login-user.dto';

@Controller('user')
export class UserController {
  constructor(private readonly userService: UserService) {}

  @Post('login')
  async login(@Body() loginDto: LoginUserDto) {
    console.log(loginDto)
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13

对应的 user/dto/login-user.dto.ts

export class LoginUserDto {
  username: string;
  password: string;
}
1
2
3
4

把服务跑起来：

npm run start:dev
1

postman 访问下：

登录成功返回 jwt，安装下用到的包：

npm install --save @nestjs/jwt
1

在 AppModule 引入：

import { Module } from "@nestjs/common";
import { AppController } from "./app.controller";
import { AppService } from "./app.service";
import { UserModule } from "./user/user.module";
import { JwtModule } from "@nestjs/jwt";

@Module({
  imports: [
    UserModule,
    JwtModule.register({
      global: true,
      secret: "guang",
    }),
  ],
  controllers: [AppController],
  providers: [AppService],
})
export class AppModule {}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

然后 login 的时候返回 jwt

import { BadRequestException, Body, Controller, Inject, Post } from '@nestjs/common';
import { UserService } from './user.service';
import { LoginUserDto } from './dto/login-user.dto';
import { JwtService } from '@nestjs/jwt';

@Controller('user')
export class UserController {
  constructor(private readonly userService: UserService) {}

  @Inject(JwtService)
  jwtService: JwtService;

  @Post('login')
  async login(@Body() loginDto: LoginUserDto) {
    if(loginDto.username !== 'guang' || loginDto.password !== '123456') {
      throw new BadRequestException('用户名或密码错误');
    }
    const jwt = this.jwtService.sign({
      username: loginDto.username
    }, {
      secret: 'guang',
      expiresIn: '7d'
    });
    return jwt;
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

登录后返回 jwt，过期时间是 7 天。

访问下：

可以看到，登录后返回了 jwt。

然后加一个 Guard 来解析 jwt：

nest g guard login --flat --no-spec
1

登录鉴权逻辑和之前一样：

import { JwtService } from '@nestjs/jwt';
import { CanActivate, ExecutionContext, Inject, Injectable, UnauthorizedException } from '@nestjs/common';
import { Request } from 'express';
import { Observable } from 'rxjs';

@Injectable()
export class LoginGuard implements CanActivate {

  @Inject(JwtService)
  private jwtService: JwtService;

  canActivate(
    context: ExecutionContext,
  ): boolean | Promise<boolean> | Observable<boolean> {

    const request: Request = context.switchToHttp().getRequest();

    const authorization = request.headers.authorization;

    if(!authorization) {
      throw new UnauthorizedException('用户未登录');
    }

    try{
      const token = authorization.split(' ')[1];
      const data = this.jwtService.verify(token);

      return true;
    } catch(e) {
      throw new UnauthorizedException('token 失效，请重新登录');
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

取出 authorization header 中的 jwt token

jwt 有效就可以继续访问，否则返回 token 失效，请重新登录。

然后在 AppController 添加个接口加上登录鉴权：

@Get('aaa')
aaa() {
    return 'aaa';
}

@Get('bbb')
@UseGuards(LoginGuard)
bbb() {
    return 'bbb';
}
1
2
3
4
5
6
7
8
9
10

aaa 接口可以直接访问，bbb 接口需要登录后才能访问。

访问 aaa 访问 bbb

登录拿到 token：

带上 token 访问 bbb：

带上 token 就可以访问需要登录的接口了。

这样就完成了登录和鉴权。

但这个 token 是有过期时间的，过期了就要重新登录了，所以要刷新 token。

上节实现了双 token 的无感刷新，今天实现单 token 刷新。

# 方式很简单，就是访问接口后返回新 token：

import {
  CanActivate,
  ExecutionContext,
  HttpException,
  HttpStatus,
  Injectable,
  Logger,
} from '@nestjs/common';
import { Reflector } from '@nestjs/core';
import { JwtService } from '@nestjs/jwt';
import { Request, Response } from 'express';
import { Observable } from 'rxjs';
import { Role } from 'src/user/entities/role.entity';

interface User {
  id: string;
  userName: string;
  roles: Role[];
}
interface JwtPayload {
  user: User;
  iat: number;
  exp: number;
}

interface RequestWithUser extends Request {
  user?: User;
}

@Injectable()
export class LoginGuard implements CanActivate {
  constructor(
    private readonly jwtService: JwtService,
    private readonly reflector: Reflector,
  ) {}
  private logger = new Logger();
  canActivate(
    context: ExecutionContext,
  ): boolean | Promise<boolean> | Observable<boolean> {
    const isRequireLogin = this.reflector.get<boolean>(
      'require-login',
      context.getHandler(),
    );

    if (!isRequireLogin) {
      return true;
    }
    const request: RequestWithUser = context.switchToHttp().getRequest();
    const response: Response = context.switchToHttp().getResponse();

    const authorization = request.headers.authorization || '';
    const [, token] = authorization.split(' ');
    if (!token) {
      throw new HttpException('身份失效', HttpStatus.UNAUTHORIZED);
    }
    try {
      const info = this.jwtService.verify<JwtPayload>(token);
      request.user = info.user;

      // 检查token是否即将过期（剩余时间少于1小时）
      const currentTime = Math.floor(Date.now() / 1000);
      const timeUntilExpiration = info.exp - currentTime;

      // 如果token即将过期（剩余时间少于1小时），生成新的token
      if (timeUntilExpiration < 3600) {
        const newToken = this.jwtService.sign(
          {
            user: info.user,
          },
          {
            expiresIn: '7d',
          },
        );
        response.setHeader('new-token', newToken);
      }
      return true;
    } catch (error) {
      this.logger.error(error);
      throw new HttpException(
        '登录 token 失效，请重新登录',
        HttpStatus.UNAUTHORIZED,
      );
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86

试一下：

这样每次返回新 token，不就永不过期了？

而且实现还特别简单。

所以单 token 自动续期的方案用的挺多的。

# 我们写下前端代码：

npx create-vite single-token-refresh-frontend
1

进入项目，把服务跑起来：

npm install
npm run dev
1
2

浏览器访问下：

项目跑起来后，我们调用下后端接口。

首先后端要开启跨域：

然后前端页面调用下：

改下 App.tsx

import { useEffect, useState } from 'react'
import './App.css'
import axios from 'axios';

function App() {
  const [content, setContent] = useState('')

  async function query() {
    try {
      const res = await axios.get('http://localhost:3000/bbb');
      setContent(res.data);
    } catch(e: any) {
      console.log(e.response.data.message);
    }
  }

  useEffect(() => {
    query();
  }, []);

  return (
    <div style={{fontSize: '100px'}}>{content}</div>
  )
}

export default App
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

在页面调用 bbb 接口，把结果显示到页面。

安装 axios：

npm install --save axios
1

提示未登录（打印两次是 main.tsx 里的 StrictMode 导致的，去掉就好了）

我们登录下：

import { useEffect, useState } from 'react'
import './App.css'
import axios from 'axios';

function App() {
  const [content, setContent] = useState('')

  async function query() {
    try {
      const res = await axios.post('http://localhost:3000/user/login', {
        username: 'guang',
        password: '123456'
      });
      console.log(res.data);

      const res2 = await axios.get('http://localhost:3000/bbb', {
        headers: {
          Authorization: `Bearer ${res.data}`
        }
      });
      setContent(res2.data);
    } catch(e: any) {
      console.log(e.response.data.message);
    }
  }

  useEffect(() => {
    query();
  }, []);

  return (
    <div style={{fontSize: '100px'}}>{content}</div>
  )
}

export default App
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

现在接口就请求成功了：

这个 token 我们一般都放到 localstorage 里，每次请求都带上。

这段逻辑我们上节写过：

axios.interceptors.request.use(function (config) {
  const accessToken = localStorage.getItem("access_token");

  if (accessToken) {
    config.headers.authorization = "Bearer " + accessToken;
  }
  return config;
});
1
2
3
4
5
6
7
8

# 那单 token 如何刷新呢？

很简单，拦截器里把 header 里的新 token 更新到 localStorage 就好了：

axios.interceptors.response.use((response) => {
  const newToken = response.headers["token"];
  if (newToken) {
    localStorage.setItem("token ", newToken);
  }
  return response;
});
1
2
3
4
5
6
7

但这样有个问题：

打印下 header

没有 token

但我们明明返回了啊：

这也是跨域的问题，默认你能访问的 header 是有限的。

# 如果想在代码访问别的 header，需要在后端支持下，在 Access-Controll-Expose-Headers 里加上这个 header

现在就可以访问这个 header 了：

这样更新完 localStorage 里的 token，不就实现无感刷新了么？

案例代码在小册仓库：

后端代码 (opens new window)

前端代码 (opens new window)

# 总结

这节我们实现了单 token 的无感刷新，它也是在公司里用的非常多的一种方案。

好处就是简单，只要每次请求接口的时候返回新的 token，然后刷新下本地 token 就可以了。

我们在 axios 的 response 拦截器里可以轻松做到这个，比双 token 的无感刷新可简单太多了。

要注意的是在代码里访问其他 header，需要后端配置下 expose headers 才可以。

你们公司里是用双 token 还是单 token 实现登录状态无感刷新呢？

（这节写的有点问题，单 token 应该在快过期的时候返回新 token，后面优化下）

编辑 (opens new window)
上次更新: 2025/9/2 18:15:19
access_token和refresh_token实现无感登录
使用 passport 做身份认证

← 使用 passport 做身份认证→

最近更新
01
UNiAPP中使用虚拟列表
01-09
02
uni统计使用
11-12
03
原生三方SDK集成探索
11-12
更多文章>
Copyright © 2019-2026 Study | MIT License