Skip to content

Token 管理

DingYue WEB SDK 提供了完整的 Token 管理功能,包括自动保存、过期检查和登出等。

获取当前 Token

获取当前保存的 Token 对象。

javascript
const token = sdk.getToken();

if (token) {
  console.log('Token:', token.token);
  console.log('用户 ID:', token.userId);
  console.log('过期时间:', new Date(token.expiresAt));
  console.log('剩余时间:', Math.floor((token.expiresAt - Date.now()) / 1000 / 60), '分钟');
} else {
  console.log('未登录或 Token 已过期');
}

返回值

javascript
{
  token: string;              // JWT Token 字符串
  userId: string;
  expiresAt: number;         // 过期时间戳(毫秒)
  tokenType: 'Bearer';
} | null  // 如果没有有效 Token,返回 null

检查是否已登录

检查当前是否有有效的登录状态。

javascript
if (sdk.isLoggedIn()) {
  console.log('用户已登录');
  // 可以安全地调用需要认证的 API
  const user = await sdk.getUserProfile();
} else {
  console.log('用户未登录,请先登录');
  // 重定向到登录页
  window.location.href = '/login';
}

返回值

  • true: 已登录且 Token 有效
  • false: 未登录或 Token 已过期

检查 Token 是否过期

检查当前 Token 是否已过期。

javascript
if (sdk.isTokenExpired()) {
  console.log('Token 已过期,请重新登录');
  // 清除过期 Token
  sdk.logout();
  // 重定向到登录页
  window.location.href = '/login';
} else {
  console.log('Token 仍有效');
  const token = sdk.getToken();
  const expiresIn = token.expiresAt - Date.now();
  console.log('Token 将在', Math.floor(expiresIn / 1000 / 60), '分钟后过期');
}

返回值

  • true: Token 已过期
  • false: Token 仍有效

登出并清除 Token

清除当前登录状态和 Token。

javascript
// 登出
sdk.logout();
console.log('已登出,Token 已清除');

// 登出后重定向
sdk.logout();
window.location.href = '/login';

自动 Token 管理

SDK 会自动管理 Token:

  • 登录成功后,Token 会自动保存到 localStorage
  • 页面刷新后,Token 会自动从 localStorage 恢复
  • Token 过期后会自动清除
  • 所有需要认证的 API 请求会自动携带 Token

Token 过期监听

javascript
// 定期检查 Token 是否即将过期
setInterval(() => {
  const token = sdk.getToken();
  if (token) {
    const expiresIn = token.expiresAt - Date.now();
    if (expiresIn < 24 * 60 * 60 * 1000) {
      // Token 在 24 小时内过期,提示用户
      console.warn('Token 即将过期,请重新登录');
    }
  }
}, 60 * 1000); // 每分钟检查一次

应用启动时检查登录状态

javascript
function initializeApp() {
  if (sdk.isLoggedIn() && !sdk.isTokenExpired()) {
    // 已登录且 Token 有效
    console.log('用户已登录');
    // 可以安全地调用需要认证的 API
    loadUserProfile();
  } else if (sdk.isLoggedIn() && sdk.isTokenExpired()) {
    // Token 已过期,清除并提示登录
    sdk.logout();
    console.log('Token 已过期,请重新登录');
    redirectToLogin();
  } else {
    // 未登录
    console.log('用户未登录');
    redirectToLogin();
  }
}

// 应用启动时调用
initializeApp();

React 示例

javascript
import { useEffect, useState } from 'react';

function useAuth() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  const [token, setToken] = useState(null);

  useEffect(() => {
    // 检查登录状态
    const checkAuth = () => {
      const loggedIn = sdk.isLoggedIn();
      setIsLoggedIn(loggedIn);
      
      if (loggedIn) {
        const tokenObj = sdk.getToken();
        setToken(tokenObj);
      } else {
        setToken(null);
      }
    };

    // 初始检查
    checkAuth();

    // 定期检查(每 30 秒)
    const interval = setInterval(checkAuth, 30000);

    return () => clearInterval(interval);
  }, []);

  const logout = () => {
    sdk.logout();
    setIsLoggedIn(false);
    setToken(null);
  };

  return { isLoggedIn, token, logout };
}

Vue 示例

vue
<template>
  <div>
    <div v-if="isLoggedIn">
      <p>已登录</p>
      <p>Token 过期时间: {{ tokenExpiresAt }}</p>
      <button @click="handleLogout">登出</button>
    </div>
    <div v-else>
      <p>未登录</p>
      <button @click="$router.push('/login')">去登录</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoggedIn: false,
      tokenExpiresAt: null
    };
  },
  mounted() {
    this.checkAuth();
    // 定期检查(每 30 秒)
    this.authInterval = setInterval(this.checkAuth, 30000);
  },
  beforeDestroy() {
    if (this.authInterval) {
      clearInterval(this.authInterval);
    }
  },
  methods: {
    checkAuth() {
      this.isLoggedIn = this.$sdk.isLoggedIn();
      if (this.isLoggedIn) {
        const token = this.$sdk.getToken();
        this.tokenExpiresAt = new Date(token.expiresAt).toLocaleString();
      } else {
        this.tokenExpiresAt = null;
      }
    },
    handleLogout() {
      this.$sdk.logout();
      this.isLoggedIn = false;
      this.tokenExpiresAt = null;
      this.$router.push('/login');
    }
  }
};
</script>

注意事项

  • Token 存储在 localStorage 中,页面刷新后会自动恢复
  • 如果 Token 已过期,getToken() 会自动返回 null
  • 登出会清除内存中的 Token 和 localStorage 中的 Token
  • 登出后需要重新登录才能使用需要认证的 API
  • Token 有效期为 7 天(由服务器决定)
  • SDK 会自动检查 Token 过期时间,包含 5 秒缓冲时间