Appearance
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 秒缓冲时间