1
                    ┌─────────────────────────────────────┐
2
                    │          生成二维码                    │
3
                    │          (PENDING)                    │
4
                    └──────────┬──────────────────────────┘
5
                               │
6
                    ┌──────────▼──────────────────────────┐
7
              ┌─────┤         等待扫码                      │
8
              │     │         (PENDING)                    │
9
              │     └──┬──────────────────┬───────────────┘
10
              │        │                  │
11
              │   ┌────▼─────┐     ┌─────▼──────┐
12
              │   │  超时     │     │  手机扫码    │
13
              │   │ (EXPIRED) │     │ (SCANNED)   │
14
              │   └──────────┘     └──┬───────┬──┘
15
              │                        │       │
16
              │                   ┌────▼──┐ ┌──▼────────┐
17
              │                   │ 确认   │ │  取消      │
18
              │                   │(CONFIRMED)│(CANCELED) │
19
              │                   └────┬──┘ └───────────┘
20
              │                        │
21
              └────────────────────────┘
22
                    (任何非PENDING状态
23
                     均为终态，不可逆)

1
┌──────────────────────────────────────────────────────────────────┐
2
│                    扫码登录方案选择决策树                            │
3
├──────────────────────────────────────────────────────────────────┤
4
│                                                                   │
5
│  企业级首选：WebSocket                                             │
6
│  └── 实时性最好，资源占用最低，体验最佳                            │
7
│                                                                   │
8
│  降级方案：长轮询                                                  │
9
│  └── WebSocket 连接失败时自动降级，保证兼容性                      │
10
│                                                                   │
11
│  快速验证：短轮询                                                  │
12
│  └── 实现简单，适合原型验证                                        │
13
│                                                                   │
14
│  需兼容旧浏览器：短轮询 + 长轮询                                    │
15
│  └── 最差体验，最强兼容性                                          │
16
│                                                                   │
17
│  企业级推荐：WebSocket 为主 + 长轮询降级                            │
18
│  └── 优先 WebSocket，连接失败自动降级为长轮询                       │
19
│                                                                   │
20
└──────────────────────────────────────────────────────────────────┘

1
@Data
2
@Builder
3
@NoArgsConstructor
4
@AllArgsConstructor
5
public class QrCodeStatus {
6
    private String qrCodeId;
7
    private QrCodeStatusEnum status;
8
    private Long userId;
9
    private String nickname;
10
    private String avatar;
11
    private String pcAccessToken;
12
    private String pcRefreshToken;
13
    private LocalDateTime createdAt;
14
    private LocalDateTime expireAt;
15
}

1
@Component
2
public class QrCodeWebSocketHandler extends TextWebSocketHandler {
3

4
    private final ConcurrentHashMap<String, WebSocketSession> sessions = new ConcurrentHashMap<>();
5
    private final RedisService redisService;
6

7
    private static final String QR_CODE_KEY_PREFIX = "qr_code:";
8

9
    @Override
10
    public void afterConnectionEstablished(WebSocketSession session) throws Exception {
11
        String qrCodeId = getQrCodeId(session);
12
        if (qrCodeId == null) {
13
            session.close();
14
            return;
15
        }
16

17
        sessions.put(qrCodeId, session);
18

19
        QrCodeStatus current = getQrCodeStatusFromRedis(qrCodeId);
20
        if (current != null) {
21
            sendStatus(session, current);
22
        }
23
    }
24

25
    @Override
26
    public void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception {
27
        String qrCodeId = getQrCodeId(session);
28
        if (qrCodeId != null) {
29
            sessions.remove(qrCodeId);
30
        }
31
    }
32

33
    public void pushStatusUpdate(String qrCodeId, QrCodeStatus status) {
34
        WebSocketSession session = sessions.get(qrCodeId);
35
        if (session != null && session.isOpen()) {
36
            sendStatus(session, status);
37
        }
38
    }
39

40
    private void sendStatus(WebSocketSession session, QrCodeStatus status) {
41
        try {
42
            ObjectMapper mapper = new ObjectMapper();
43
            session.sendMessage(new TextMessage(mapper.writeValueAsString(buildResponse(status))));
44
        } catch (Exception e) {
45
            e.printStackTrace();
46
        }
47
    }
48

49
    private QrCodeStatusResponse buildResponse(QrCodeStatus status) {
50
        return QrCodeStatusResponse.builder()
51
                .qrCodeId(status.getQrCodeId())
52
                .status(status.getStatus())
53
                .userId(status.getUserId())
54
                .nickname(status.getNickname())
55
                .avatar(status.getAvatar())
56
                .pcAccessToken(status.getPcAccessToken())
57
                .pcRefreshToken(status.getPcRefreshToken())
58
                .build();
59
    }
60

61
    private String getQrCodeId(WebSocketSession session) {
62
        String query = session.getUri().getQuery();
63
        if (query == null) return null;
64
        for (String param : query.split("&")) {
65
            String[] pair = param.split("=");
66
            if ("qrCodeId".equals(pair[0])) {
67
                return pair[1];
68
            }
69
        }
70
        return null;
71
    }
72

73
    private QrCodeStatus getQrCodeStatusFromRedis(String qrCodeId) {
74
        String key = QR_CODE_KEY_PREFIX + qrCodeId;
75
        Map<String, String> hash = redisService.hGetAll(key);
76
        if (hash == null || hash.isEmpty()) {
77
            return null;
78
        }
79
        return QrCodeStatus.builder()
80
                .qrCodeId(qrCodeId)
81
                .status(QrCodeStatusEnum.fromCode(Integer.parseInt(hash.get("status"))))
82
                .userId(hash.containsKey("userId") ? Long.parseLong(hash.get("userId")) : null)
83
                .nickname(hash.get("nickname"))
84
                .avatar(hash.get("avatar"))
85
                .pcAccessToken(hash.get("pcAccessToken"))
86
                .pcRefreshToken(hash.get("pcRefreshToken"))
87
                .build();
88
    }
89
}

1
@Service
2
@RequiredArgsConstructor
3
@Slf4j
4
public class QrCodeLoginServiceImpl implements QrCodeLoginService {
5

6
    private final RedisService redisService;
7
    private final JwtUtils jwtUtils;
8
    private final QrCodeWebSocketHandler webSocketHandler;
9

10
    private static final long QR_CODE_TTL_SECONDS = 120;
11
    private static final String QR_CODE_KEY_PREFIX = "qr_code:";
12
    private static final String QR_CODE_SCAN_LOCK_PREFIX = "qr_code:scan_lock:";
13

14
    @Override
15
    public QrCodeGenerateResponse generate() {
16
        String qrCodeId = UUID.randomUUID().toString().replace("-", "");
17

18
        QrCodeStatus status = QrCodeStatus.builder()
19
                .qrCodeId(qrCodeId)
20
                .status(QrCodeStatusEnum.PENDING)
21
                .createdAt(LocalDateTime.now())
22
                .expireAt(LocalDateTime.now().plusSeconds(QR_CODE_TTL_SECONDS))
23
                .build();
24

25
        String key = QR_CODE_KEY_PREFIX + qrCodeId;
26
        Map<String, String> hash = new HashMap<>();
27
        hash.put("status", String.valueOf(QrCodeStatusEnum.PENDING.getCode()));
28
        hash.put("createdAt", String.valueOf(System.currentTimeMillis()));
29
        redisService.hPutAll(key, hash);
30
        redisService.expire(key, QR_CODE_TTL_SECONDS, TimeUnit.SECONDS);
31

32
        String qrCodeUrl = buildQrCodeUrl(qrCodeId);
33

34
        return QrCodeGenerateResponse.builder()
35
                .qrCodeId(qrCodeId)
36
                .qrCodeUrl(qrCodeUrl)
37
                .expireIn(QR_CODE_TTL_SECONDS)
38
                .build();
39
    }
40

41
    private String buildQrCodeUrl(String qrCodeId) {
42
        return "https://your-domain.com/scan?qrCodeId=" + qrCodeId;
43
    }

1
    @Override
2
    public QrCodeScanResponse scan(String qrCodeId, String accessToken) {
3
        Long userId = jwtUtils.getUserIdAsLong(accessToken);
4
        String lockKey = QR_CODE_SCAN_LOCK_PREFIX + qrCodeId;
5

6
        Boolean locked = redisService.setIfAbsent(lockKey, String.valueOf(userId), 5, TimeUnit.SECONDS);
7
        if (Boolean.FALSE.equals(locked)) {
8
            throw new AuthException("二维码正在被其他设备处理，请稍后重试");
9
        }
10

11
        try {
12
            String key = QR_CODE_KEY_PREFIX + qrCodeId;
13
            Map<String, String> hash = redisService.hGetAll(key);
14

15
            if (hash == null || hash.isEmpty()) {
16
                QrCodeStatus expiredStatus = QrCodeStatus.builder()
17
                        .qrCodeId(qrCodeId)
18
                        .status(QrCodeStatusEnum.EXPIRED)
19
                        .build();
20
                webSocketHandler.pushStatusUpdate(qrCodeId, expiredStatus);
21
                throw new AuthException("二维码已过期，请刷新重试");
22
            }
23

24
            QrCodeStatusEnum currentStatus = QrCodeStatusEnum.fromCode(
25
                    Integer.parseInt(hash.get("status")));
26

27
            if (currentStatus == QrCodeStatusEnum.SCANNED) {
28
                Long existUserId = Long.parseLong(hash.get("userId"));
29
                if (!existUserId.equals(userId)) {
30
                    throw new AuthException("该二维码已被其他用户扫描");
31
                }
32
                return QrCodeScanResponse.alreadyScanned();
33
            }
34

35
            if (currentStatus != QrCodeStatusEnum.PENDING) {
36
                throw new AuthException("二维码状态异常: " + currentStatus.getDesc());
37
            }
38

39
            hash.put("status", String.valueOf(QrCodeStatusEnum.SCANNED.getCode()));
40
            hash.put("userId", String.valueOf(userId));
41
            SysUserApi user = remoteUserService.getUserById(userId);
42
            hash.put("nickname", user.getNickName());
43
            hash.put("avatar", user.getAvatar());
44
            redisService.hPutAll(key, hash);
45
            redisService.expire(key, 60, TimeUnit.SECONDS);
46

47
            QrCodeStatus scannedStatus = QrCodeStatus.builder()
48
                    .qrCodeId(qrCodeId)
49
                    .status(QrCodeStatusEnum.SCANNED)
50
                    .userId(userId)
51
                    .nickname(user.getNickName())
52
                    .avatar(user.getAvatar())
53
                    .build();
54
            webSocketHandler.pushStatusUpdate(qrCodeId, scannedStatus);
55

56
            return QrCodeScanResponse.builder()
57
                    .qrCodeId(qrCodeId)
58
                    .nickname(user.getNickName())
59
                    .avatar(user.getAvatar())
60
                    .build();
61
        } finally {
62
            redisService.deleteObject(lockKey);
63
        }
64
    }

1
    @Override
2
    public QrCodeConfirmResponse confirm(String qrCodeId, String accessToken) {
3
        Long userId = jwtUtils.getUserIdAsLong(accessToken);
4

5
        String key = QR_CODE_KEY_PREFIX + qrCodeId;
6
        Map<String, String> hash = redisService.hGetAll(key);
7

8
        if (hash == null || hash.isEmpty()) {
9
            QrCodeStatus expiredStatus = QrCodeStatus.builder()
10
                    .qrCodeId(qrCodeId)
11
                    .status(QrCodeStatusEnum.EXPIRED)
12
                    .build();
13
            webSocketHandler.pushStatusUpdate(qrCodeId, expiredStatus);
14
            throw new AuthException("二维码已过期");
15
        }
16

17
        QrCodeStatusEnum currentStatus = QrCodeStatusEnum.fromCode(
18
                Integer.parseInt(hash.get("status")));
19

20
        if (currentStatus != QrCodeStatusEnum.SCANNED) {
21
            throw new AuthException("二维码状态异常，当前状态: " + currentStatus.getDesc());
22
        }
23

24
        Long scannedUserId = Long.parseLong(hash.get("userId"));
25
        if (!scannedUserId.equals(userId)) {
26
            throw new AuthException("确认用户与扫码用户不一致");
27
        }
28

29
        Map<String, Object> claims = new HashMap<>();
30
        claims.put(SecurityConstants.USER_ID, userId);
31
        claims.put(SecurityConstants.USER_NAME, hash.get("nickname"));
32
        claims.put("token_type", "access");
33
        String pcAccessToken = jwtUtils.createToken(claims);
34

35
        String refreshToken = jwtUtils.createRefreshToken(userId);
36

37
        String accessTokenKey = CacheConstants.CACHE_LOGIN_TOKEN + userId;
38
        String refreshTokenKey = CacheConstants.CACHE_LOGIN_REFRESH + userId;
39
        redisService.setSetCacheObject(accessTokenKey, pcAccessToken);
40
        redisService.expire(accessTokenKey, SecurityConstants.TOKEN_EXPIRE, TimeUnit.MINUTES);
41
        redisService.setSetCacheObject(refreshTokenKey, refreshToken);
42
        redisService.expire(refreshTokenKey, SecurityConstants.REFRESH_TOKEN_EXPIRE, TimeUnit.DAYS);
43

44
        hash.put("status", String.valueOf(QrCodeStatusEnum.CONFIRMED.getCode()));
45
        hash.put("pcAccessToken", pcAccessToken);
46
        hash.put("pcRefreshToken", refreshToken);
47
        redisService.hPutAll(key, hash);
48

49
        QrCodeStatus confirmedStatus = QrCodeStatus.builder()
50
                .qrCodeId(qrCodeId)
51
                .status(QrCodeStatusEnum.CONFIRMED)
52
                .userId(userId)
53
                .nickname(hash.get("nickname"))
54
                .avatar(hash.get("avatar"))
55
                .pcAccessToken(pcAccessToken)
56
                .pcRefreshToken(refreshToken)
57
                .build();
58
        webSocketHandler.pushStatusUpdate(qrCodeId, confirmedStatus);
59

60
        redisService.deleteObject(key);
61

62
        return QrCodeConfirmResponse.success(qrCodeId);
63
    }

1
    @Override
2
    public void cancel(String qrCodeId, String accessToken) {
3
        Long userId = jwtUtils.getUserIdAsLong(accessToken);
4

5
        String key = QR_CODE_KEY_PREFIX + qrCodeId;
6
        Map<String, String> hash = redisService.hGetAll(key);
7

8
        if (hash == null || hash.isEmpty()) {
9
            QrCodeStatus expiredStatus = QrCodeStatus.builder()
10
                    .qrCodeId(qrCodeId)
11
                    .status(QrCodeStatusEnum.EXPIRED)
12
                    .build();
13
            webSocketHandler.pushStatusUpdate(qrCodeId, expiredStatus);
14
            return;
15
        }
16

17
        QrCodeStatusEnum currentStatus = QrCodeStatusEnum.fromCode(
18
                Integer.parseInt(hash.get("status")));
19

20
        if (currentStatus != QrCodeStatusEnum.SCANNED) {
21
            return;
22
        }
23

24
        Long scannedUserId = Long.parseLong(hash.get("userId"));
25
        if (!scannedUserId.equals(userId)) {
26
            throw new AuthException("取消用户与扫码用户不一致");
27
        }
28

29
        hash.put("status", String.valueOf(QrCodeStatusEnum.CANCELED.getCode()));
30
        redisService.hPutAll(key, hash);
31

32
        QrCodeStatus canceledStatus = QrCodeStatus.builder()
33
                .qrCodeId(qrCodeId)
34
                .status(QrCodeStatusEnum.CANCELED)
35
                .userId(userId)
36
                .build();
37
        webSocketHandler.pushStatusUpdate(qrCodeId, canceledStatus);
38
    }

1
    @Override
2
    public QrCodeStatusResponse getStatus(String qrCodeId, long timeoutSeconds) {
3
        long startTime = System.currentTimeMillis();
4
        long timeoutMillis = TimeUnit.SECONDS.toMillis(Math.min(timeoutSeconds, 25));
5

6
        while (System.currentTimeMillis() - startTime < timeoutMillis) {
7
            QrCodeStatus status = getQrCodeStatusFromRedis(qrCodeId);
8

9
            if (status == null) {
10
                return QrCodeStatusResponse.expired(qrCodeId);
11
            }
12

13
            if (status.getStatus() != QrCodeStatusEnum.PENDING) {
14
                return buildResponse(status);
15
            }
16

17
            try {
18
                Thread.sleep(500);
19
            } catch (InterruptedException e) {
20
                Thread.currentThread().interrupt();
21
                return buildResponse(status);
22
            }
23
        }
24

25
        QrCodeStatus status = getQrCodeStatusFromRedis(qrCodeId);
26
        if (status == null) {
27
            return QrCodeStatusResponse.expired(qrCodeId);
28
        }
29
        return buildResponse(status);
30
    }
31

32
    private QrCodeStatusResponse buildResponse(QrCodeStatus status) {
33
        return QrCodeStatusResponse.builder()
34
                .qrCodeId(status.getQrCodeId())
35
                .status(status.getStatus())
36
                .userId(status.getUserId())
37
                .nickname(status.getNickname())
38
                .avatar(status.getAvatar())
39
                .pcAccessToken(status.getPcAccessToken())
40
                .pcRefreshToken(status.getPcRefreshToken())
41
                .build();
42
    }
43

44
    private QrCodeStatus getQrCodeStatusFromRedis(String qrCodeId) {
45
        String key = QR_CODE_KEY_PREFIX + qrCodeId;
46
        Map<String, String> hash = redisService.hGetAll(key);
47
        if (hash == null || hash.isEmpty()) {
48
            return null;
49
        }
50
        return QrCodeStatus.builder()
51
                .qrCodeId(qrCodeId)
52
                .status(QrCodeStatusEnum.fromCode(Integer.parseInt(hash.get("status"))))
53
                .userId(hash.containsKey("userId") ? Long.parseLong(hash.get("userId")) : null)
54
                .nickname(hash.get("nickname"))
55
                .avatar(hash.get("avatar"))
56
                .pcAccessToken(hash.get("pcAccessToken"))
57
                .pcRefreshToken(hash.get("pcRefreshToken"))
58
                .build();
59
    }
60
}

1
@RestController
2
@RequestMapping("/auth/qr-code")
3
@RequiredArgsConstructor
4
@Tag(name = "扫码登录")
5
public class QrCodeLoginController {
6

7
    private final QrCodeLoginService qrCodeLoginService;
8

9
    @Operation(summary = "生成二维码")
10
    @PostMapping("/generate")
11
    public R<QrCodeGenerateResponse> generate() {
12
        return R.ok(qrCodeLoginService.generate());
13
    }
14

15
    @Operation(summary = "查询二维码状态（长轮询降级）")
16
    @GetMapping("/status")
17
    public R<QrCodeStatusResponse> getStatus(
18
            @RequestParam String qrCodeId,
19
            @RequestParam(defaultValue = "25") long timeout) {
20
        return R.ok(qrCodeLoginService.getStatus(qrCodeId, timeout));
21
    }
22

23
    @Operation(summary = "手机扫码")
24
    @PostMapping("/scan")
25
    public R<QrCodeScanResponse> scan(
26
            @RequestParam String qrCodeId,
27
            @RequestHeader(SecurityConstants.AUTHORIZATION_HEADER) String authorization) {
28
        String accessToken = authorization.replace(SecurityConstants.TOKEN_PREFIX, "");
29
        return R.ok(qrCodeLoginService.scan(qrCodeId, accessToken));
30
    }
31

32
    @Operation(summary = "手机确认登录")
33
    @PostMapping("/confirm")
34
    public R<QrCodeConfirmResponse> confirm(
35
            @RequestParam String qrCodeId,
36
            @RequestHeader(SecurityConstants.AUTHORIZATION_HEADER) String authorization) {
37
        String accessToken = authorization.replace(SecurityConstants.TOKEN_PREFIX, "");
38
        return R.ok(qrCodeLoginService.confirm(qrCodeId, accessToken));
39
    }
40

41
    @Operation(summary = "手机取消登录")
42
    @PostMapping("/cancel")
43
    public R<Void> cancel(
44
            @RequestParam String qrCodeId,
45
            @RequestHeader(SecurityConstants.AUTHORIZATION_HEADER) String authorization) {
46
        String accessToken = authorization.replace(SecurityConstants.TOKEN_PREFIX, "");
47
        qrCodeLoginService.cancel(qrCodeId, accessToken);
48
        return R.ok();
49
    }
50
}

1
import { ref, onMounted, onUnmounted } from 'vue'
2
import { useRouter } from 'vue-router'
3
import { useUserStore } from '@/stores/user'
4
import { qrCodeApi } from '@/api/auth'
5

6
type QrCodeStatus = 'PENDING' | 'SCANNED' | 'CONFIRMED' | 'CANCELED' | 'EXPIRED'
7

8
interface QrCodeStatusResponse {
9
  qrCodeId: string
10
  status: QrCodeStatus
11
  userId?: number
12
  nickname?: string
13
  avatar?: string
14
  pcAccessToken?: string
15
  pcRefreshToken?: string
16
}
17

18
export function useQrCodeLogin() {
19
  const router = useRouter()
20
  const userStore = useUserStore()
21

22
  const qrCodeId = ref('')
23
  const qrCodeUrl = ref('')
24
  const status = ref<QrCodeStatus>('PENDING')
25
  const scannedUser = ref<{ nickname: string; avatar: string } | null>(null)
26
  const countdown = ref(0)
27
  const loading = ref(false)
28
  const useFallback = ref(false)
29

30
  let ws: WebSocket | null = null
31
  let countdownTimer: ReturnType<typeof setInterval> | null = null
32
  let reconnectAttempts = 0
33
  const MAX_RECONNECT = 3
34
  let pollTimer: ReturnType<typeof setTimeout> | null = null
35

36
  async function generateQrCode() {
37
    loading.value = true
38
    try {
39
      const res = await qrCodeApi.generate()
40
      qrCodeId.value = res.data.qrCodeId
41
      qrCodeUrl.value = res.data.qrCodeUrl
42
      countdown.value = res.data.expireIn
43
      status.value = 'PENDING'
44
      scannedUser.value = null
45
      useFallback.value = false
46
      reconnectAttempts = 0
47
      startCountdown()
48
      connectWs()
49
    } finally {
50
      loading.value = false
51
    }
52
  }
53

54
  function connectWs() {
55
    const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:'
56
    const wsUrl = `${protocol}//${window.location.host}/ws/qr-code?qrCodeId=${qrCodeId.value}`
57
    ws = new WebSocket(wsUrl)
58

59
    ws.onopen = () => {
60
      reconnectAttempts = 0
61
    }
62

63
    ws.onmessage = (event) => {
64
      const data: QrCodeStatusResponse = JSON.parse(event.data)
65
      handleStatusUpdate(data)
66
    }
67

68
    ws.onclose = () => {
69
      if (status.value === 'CONFIRMED' || status.value === 'CANCELED' || status.value === 'EXPIRED') {
70
        return
71
      }
72

73
      if (reconnectAttempts < MAX_RECONNECT) {
74
        reconnectAttempts++
75
        setTimeout(() => connectWs(), 2000 * reconnectAttempts)
76
      } else {
77
        fallbackToPolling()
78
      }
79
    }
80

81
    ws.onerror = () => {
82
      ws?.close()
83
    }
84
  }
85

86
  function fallbackToPolling() {
87
    useFallback.value = true
88
    startPolling()
89
  }
90

91
  async function startPolling() {
92
    if (status.value === 'CONFIRMED' || status.value === 'CANCELED' || status.value === 'EXPIRED') {
93
      return
94
    }
95

96
    try {
97
      const res = await qrCodeApi.getStatus(qrCodeId.value, 25)
98
      handleStatusUpdate(res.data)
99
    } catch {
100
    } finally {
101
      if (useFallback.value && status.value === 'PENDING') {
102
        pollTimer = setTimeout(() => startPolling(), 2000)
103
      }
104
    }
105
  }
106

107
  function handleStatusUpdate(data: QrCodeStatusResponse) {
108
    status.value = data.status
109

110
    switch (data.status) {
111
      case 'SCANNED':
112
        scannedUser.value = { nickname: data.nickname!, avatar: data.avatar! }
113
        break
114
      case 'CONFIRMED':
115
        handleLoginSuccess(data)
116
        break
117
      case 'CANCELED':
118
      case 'EXPIRED':
119
        break
120
    }
121
  }
122

123
  function handleLoginSuccess(data: QrCodeStatusResponse) {
124
    if (data.pcAccessToken) {
125
      document.cookie = `access_token=${data.pcAccessToken}; path=/; max-age=1800; SameSite=Lax; ${window.location.protocol === 'https:' ? 'Secure;' : ''}`
126
    }
127
    if (data.pcRefreshToken) {
128
      document.cookie = `refresh_token=${data.pcRefreshToken}; path=/; max-age=2592000; SameSite=Lax; ${window.location.protocol === 'https:' ? 'Secure;' : ''}`
129
    }
130
    userStore.setUserInfo({ accessToken: data.pcAccessToken! })
131
    router.push('/dashboard')
132
  }
133

134
  function startCountdown() {
135
    if (countdownTimer) clearInterval(countdownTimer)
136
    countdownTimer = setInterval(() => {
137
      countdown.value--
138
      if (countdown.value <= 0) {
139
        status.value = 'EXPIRED'
140
        cleanup()
141
      }
142
    }, 1000)
143
  }
144

145
  function cleanup() {
146
    if (ws) {
147
      ws.close()
148
      ws = null
149
    }
150
    if (pollTimer) {
151
      clearTimeout(pollTimer)
152
      pollTimer = null
153
    }
154
    if (countdownTimer) {
155
      clearInterval(countdownTimer)
156
      countdownTimer = null
157
    }
158
  }
159

160
  function refreshQrCode() {
161
    cleanup()
162
    generateQrCode()
163
  }
164

165
  onMounted(() => generateQrCode())
166
  onUnmounted(() => cleanup())
167

168
  return {
169
    qrCodeId, qrCodeUrl, status, scannedUser, countdown, loading,
170
    useFallback, refreshQrCode
171
  }
172
}