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

accesstoken和refreshtoken实现无感登录

# 前言

前面我们实现了基于 JWT 的登录，流程是这样的：

登录认证通过之后，把用户信息放到 jwt 里返回：

访问接口的时候带上 jwt，在 Guard 里取出来判断是否有效，有效的话才能继续访问：

但是这样有个问题：

jwt 是有有效期的，我们设置的是 7 天，实际上为了安全考虑会设置的很短，比如 30 分钟。

这时候用户可能还在访问系统的某个页面，结果访问某个接口返回 token 失效了，让重新登录。

体验是不是就很差？

# 为了解决 token 失效这个问题，服务端一般会返回两个 token：access_token 和 refresh_token

access_token 就是用来认证用户身份的，之前我们返回的就是这个 token。

而 refresh_token 是用来刷新 token 的，服务端会返回新的 access_token 和 refresh_token

也就是这样的流程：

登录成功之后，返回两个 token：

access_token 用来做登录鉴权：

而 refresh_token 用来刷新，拿到新 token：

access_token 设置 30 分钟过期，而 refresh_token 设置 7 天过期。

这样 7 天内，如果 access_token 过期了，那就可以用 refresh_token 刷新下，拿到新 token。

只要不超过 7 天未访问系统，就可以一直是登录状态，可以无限续签，不需要登录。

如果超过 7 天未访问系统，那 refresh_token 也就过期了，这时候就需要重新登录了。

想想你常用的 app，登录过几次？

是不是常用的 app 基本不用重新登录？

如果你超过一段时间没使用这个 app，是不是又会让你重新登录了？

一般 app 里用的就是这种双 token 来做登录鉴权。

下面我们也来实现下这种机制。

# 准备

创建个 nest 项目：

nest new access_token_and_refresh_token -p npm
1

添加 user 模块：

nest g resource user --no-spec
1

安装 typeorm 的依赖：

npm install --save @nestjs/typeorm typeorm mysql2
1

在 AppModule 引入 TypeOrmModule：

import { Module } from "@nestjs/common";
import { TypeOrmModule } from "@nestjs/typeorm";
import { AppController } from "./app.controller";
import { AppService } from "./app.service";

@Module({
  imports: [
    TypeOrmModule.forRoot({
      type: "mysql",
      host: "localhost",
      port: 3306,
      username: "root",
      password: "guang",
      database: "refresh_token_test",
      synchronize: true,
      logging: true,
      entities: [],
      poolSize: 10,
      connectorPackage: "mysql2",
      extra: {
        authPlugin: "sha256_password",
      },
    }),
  ],
  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
19
20
21
22
23
24
25
26
27
28

在 mysql workbench 里创建用到的 database：

CREATE DATABASE refresh_token_test DEFAULT CHARACTER SET utf8mb4;
1

然后新建 User 的 entity：

import { Column, Entity, PrimaryGeneratedColumn } from "typeorm";

@Entity()
export class User {
  @PrimaryGeneratedColumn()
  id: number;

  @Column({
    length: 50,
  })
  username: string;

  @Column({
    length: 50,
  })
  password: string;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

在 entities 里添加 User：

然后把服务跑起来：

npm run start:dev
1

会生成建表 sql：

在 mysql workbench 里可以看到 user 表：

然后在 UserController 添加 login 的 post 接口：

@Post('login')
login(@Body() loginUser: LoginUserDto) {
    console.log(loginUser);
    return 'success';
}
1
2
3
4
5

创建 src/user/dto/login-user.dto.ts

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

测试下：

# 然后实现下登录逻辑。

在 UserService 里添加 login 方法：

import { HttpException, HttpStatus, Injectable } from '@nestjs/common';
import { InjectEntityManager } from '@nestjs/typeorm';
import { EntityManager } from 'typeorm';
import { LoginUserDto } from './dto/login-user.dto';
import { User } from './entity/user.entity';

@Injectable()
export class UserService {

    @InjectEntityManager()
    private entityManager: EntityManager;

    async login(loginUserDto: LoginUserDto) {
        const user = await this.entityManager.findOne(User, {
            where: {
                username: loginUserDto.username
            }
        });

        if(!user) {
            throw new HttpException('用户不存在', HttpStatus.OK);
        }

        if(user.password !== loginUserDto.password) {
            throw new HttpException('密码错误', HttpStatus.OK);
        }

        return user;
    }
}
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

然后登录成功之后要返回两个 token

# 我们引入下 jwt 的包：

npm install --save @nestjs/jwt
1

在 AppModule 引入 JwtModule，设置为全局模块，指定默认过期时间和密钥：

JwtModule.register({
  global: true,
  signOptions: {
    expiresIn: "30m",
  },
  secret: "guang",
});
1
2
3
4
5
6
7

# 然后在 UserController 生成两个 token 返回：

@Inject(JwtService)
private jwtService: JwtService;

@Post('login')
async login(@Body() loginUser: LoginUserDto) {
    const user = await this.userService.login(loginUser);

    const access_token = this.jwtService.sign({
      userId: user.id,
      username: user.username,
    }, {
      expiresIn: '30m'
    });

    const refresh_token = this.jwtService.sign({
      userId: user.id
    }, {
      expiresIn: '7d'
    });

    return {
      access_token,
      refresh_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

access_token 里存放 userId、username，refresh_token 里只存放 userId 就好了。

过期时间一个 30 分钟，一个 7 天。

访问下试试：

# 接下来再实现 LoginGuard 来做登录鉴权：

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，这个就是 access_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 接口需要登录后才能访问。

在 user 表添加条记录：

INSERT INTO `refresh_token_test`.`user` (`id`, `username`, `password`)
  VALUES ('1', 'guang', '123456');
1
2

我们测试一下：

鉴权逻辑生效了。

然后我们登录下：

把 access_token 复制下来，加到 header 里再访问：

这样就能访问了。

现在的 access_token 是 30 分钟过期，30 分钟之后就需要重新登录了。

# 这样显然体验不好，接下来实现用 refresh_token 来刷新的逻辑：

  @Get('refresh')
  async refresh(@Query('refresh_token') refreshToken: string) {
    try {
      const data = this.jwtService.verify(refreshToken);

      const user = await this.userService.findUserById(data.userId);

      const access_token = this.jwtService.sign({
        userId: user.id,
        username: user.username,
      }, {
        expiresIn: '30m'
      });

      const refresh_token = this.jwtService.sign({
        userId: user.id
      }, {
        expiresIn: '7d'
      });

      return {
        access_token,
        refresh_token
      }
    } 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

取出 refresh_token 里的 userId，从数据库中把 user 信息查出来，然后生成新的 access_token 和 refresh_token 返回。

如果 jwt 校验失败，就返回 token 已失效，请重新登录。

在 UserService 实现下这个 findUserById 的方法：

async findUserById(userId: number) {
    return await this.entityManager.findOne(User, {
        where: {
            id: userId
        }
    });
}
1
2
3
4
5
6
7

测试下：

带上有效的 refresh_token，能够拿到新的 access_token 和 refresh_token：

refresh_token 失效或者错误时，会返回 401 的响应码，提示需要重新登录：

这样，我们就实现了双 token 的登录鉴权机制。

只要 7 天内带上 refresh_token 来拿到新的 token，就可以一直保持登录状态。

# 那前端代码里访问接口的时候怎么用这俩 token 呢？

# 我们新建个 react 项目试一下：

npx create-react-app --template=typescript refresh_token_test
1

安装 axios：

npm install --save axios
1

# 在 App.tsx 里访问下 /aaa、/bbb 接口：

import axios from "axios";
import { useEffect, useState } from "react";

function App() {
  const [aaa, setAaa] = useState();
  const [bbb, setBbb] = useState();

  async function query() {
    const { data: aaaData } = await axios.get("http://localhost:3000/aaa");
    const { data: bbbData } = await axios.get("http://localhost:3000/bbb");

    setAaa(aaaData);
    setBbb(bbbData);
  }
  useEffect(() => {
    query();
  }, []);

  return (
    <div>
      <p>{aaa}</p>
      <p>{bbb}</p>
    </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

# 在服务端开启跨域支持：

把开发服务跑起来：

npm run start
1

可以看到 /aaa 访问成功，返回了数据，/bbb 返回了 401

这里请求两次是因为 index.tsx 里面有个 React.StrictMode，把它去掉就好了：

# 我们先登录一下，拿到 access_token，然后在请求的时候带上：

import axios from "axios";
import { useEffect, useState } from "react";

function App() {
  const [aaa, setAaa] = useState();
  const [bbb, setBbb] = useState();

  async function login() {
    const res = await axios.post("http://localhost:3000/user/login", {
      username: "guang",
      password: "123456",
    });
    localStorage.setItem("access_token", res.data.access_token);
    localStorage.setItem("refresh_token", res.data.refresh_token);
  }

  async function query() {
    await login();

    const { data: aaaData } = await axios.get("http://localhost:3000/aaa");
    const { data: bbbData } = await axios.get("http://localhost:3000/bbb", {
      headers: {
        Authorization: "Bearer " + localStorage.getItem("access_token"),
      },
    });

    setAaa(aaaData);
    setBbb(bbbData);
  }
  useEffect(() => {
    query();
  }, []);

  return (
    <div>
      <p>{aaa}</p>
      <p>{bbb}</p>
    </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
37
38
39
40
41
42

刷新下，可以看到现在请求了 3 个接口，bbb 也正确拿到了数据：

如果很多接口都要添加这个 header，可以把它放在 interceptors 里做：

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 失效的时候，要自动刷新，这个也可以在 interceptors 里做：

async function refreshToken() {
  const res = await axios.get("http://localhost:3000/user/refresh", {
    params: {
      refresh_token: localStorage.getItem("refresh_token"),
    },
  });
  localStorage.setItem("access_token", res.data.access_token || "");
  localStorage.setItem("refresh_token", res.data.refresh_token || "");
  return res;
}

axios.interceptors.response.use(
  (response) => {
    return response;
  },
  async (error) => {
    let { data, config } = error.response;

    if (data.statusCode === 401 && !config.url.includes("/user/refresh")) {
      const res = await refreshToken();

      if (res.status === 200) {
        return axios(config);
      } else {
        alert("登录过期，请重新登录");
        return Promise.reject(res.data);
      }
    } else {
      return error.response;
    }
  }
);
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

如果返回的错误是 401 就刷新 token，这里要排除掉刷新的 url，刷新失败不继续刷新。

如果刷新接口返回的是 200，就用新 token 调用之前的接口

如果返回的是 401，那就返回这个错误。

判断下如果没有 access_token 才登录：

if (!localStorage.getItem("access_token")) {
  await login();
}
1
2
3

然后手动改下 access_token 的值，让它失效：

刷新下页面：

访问了 aaa、bbb 接口，bbb 接口 401 了，于是 refresh token，之后再次访问 bbb。

这样，我们就实现了 access_token 的无感刷新。

# 但这样还不完美，比如当并发多个请求的时候，如果都失效了，是不是要刷新多次?

我们加个并发请求试一下：

await [
  axios.get("http://localhost:3000/bbb"),
  axios.get("http://localhost:3000/bbb"),
  axios.get("http://localhost:3000/bbb"),
];
1
2
3
4
5

手动让 access_token 失效，然后刷新页面：

确实刷新了多次，并发的 3 次，还有后面又访问了一次：

其实这样不处理也行，多刷几次也不影响功能。

但做的完美点还是要处理下：

加一个 refreshing 的标记，如果在刷新，那就返回一个 promise，并且把它的 resolve 方法还有 config 加到队列里。

# 当 refresh 成功之后，修改 refreshing 的值，重新发送队列中的请求，并且把结果通过 resolve 返回。

interface PendingTask {
  config: AxiosRequestConfig
  resolve: Function
}
let refreshing = false;
const queue: PendingTask[] = [];

axios.interceptors.response.use(
  (response) => {
    return response;
  },
  async (error) => {
    let { data, config } = error.response;

    if(refreshing) {
      return new Promise((resolve) => {
          queue.push({
              config,
              resolve
          });
      });
    }

    if (data.statusCode === 401 && !config.url.includes('/user/refresh')) {
        refreshing = true;

        const res = await refreshToken();

        refreshing = false;

        if(res.status === 200) {

          queue.forEach(({config, resolve}) => {
              resolve(axios(config))
          })

          return axios(config);
        } else {
          alert('登录过期，请重新登录');
          return Promise.reject(res.data);
        }

    } else {
      return error.response;
    }
  }
)
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

测试下：

手动让 access_token 失效然后刷新：

现在就只刷新一次 token 了：

# 最后，为什么说双 token 会更安全呢？

案例代码在小册仓库：

后端代码 (opens new window)

前端代码 (opens new window)

# 总结

这节我们实现了基于 access_token 和 refresh_token 的无感刷新登录状态，也就是无感续签。

access_token 用于身份认证，refresh_token 用于刷新 token，也就是续签。

在登录接口里同时返回 access_token 和 refresh_token，access_token 设置较短的过期时间，比如 30 分钟，refresh_token 设置较长的过期时间，比如 7 天。

当 access_token 失效的时候，可以用 refresh_token 去刷新，服务端会根据其中的 userId 查询用户数据，返回新 token。

在前端代码里，可以在登录之后，把 token 放在 localstorage 里。

然后用 axios 的 interceptors.request 给请求时自动带上 authorization 的 header。

用 intercetpors.response 在响应是 401 的时候，自动访问 refreshToken 接口拿到新 token，然后再次访问失败的接口。

我们还支持了并发请求时，如果 token 过期，会把请求放到队列里，只刷新一次，刷新完批量重发请求。

这就是 token 无感刷新的前后端实现，是用的特别多的一种方案。

编辑 (opens new window)
上次更新: 2025/9/2 18:15:19
基于 RBAC 实现权限控制
单token无限续期实现登录无感刷新

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

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