私域操盘手 - 修复 http-interceptors.ts 文件中未准确定位401错误时,可能导致意外删除 localStorage 中 token 的问题

This commit is contained in:
柳清爽
2025-05-08 14:51:22 +08:00
parent 1ec9863a8a
commit 5d83938c24
4 changed files with 313 additions and 50 deletions

View File

@@ -76,29 +76,67 @@ export function AuthProvider({ children }: AuthProviderProps) {
const storedToken = safeLocalStorage.getItem("token")
if (storedToken) {
// 验证token是否有效
const isValid = await validateToken()
if (isValid) {
// 从localStorage获取用户信息
const userDataStr = safeLocalStorage.getItem("user")
if (userDataStr) {
// 首先尝试从localStorage获取用户信息
const userDataStr = safeLocalStorage.getItem("user")
if (userDataStr) {
try {
// 如果能解析用户数据,先设置登录状态
const userData = JSON.parse(userDataStr) as User
setToken(storedToken)
setUser(userData)
setIsAuthenticated(true)
} else {
// token有效但没有用户信息清除token
// 然后在后台尝试验证token但不影响当前登录状态
validateToken().then(isValid => {
// 只有在确认token绝对无效时才登出
// 网络错误等情况默认保持登录状态
if (isValid === false) {
console.warn('验证token失败但仍允许用户保持登录状态')
}
}).catch(error => {
// 捕获所有验证过程中的错误,并记录日志
console.error('验证token过程中出错:', error)
// 网络错误等不会导致登出
})
} catch (parseError) {
// 用户数据无法解析,需要清除
console.error('解析用户数据失败:', parseError)
handleLogout()
}
} else {
// token无效,清除
handleLogout()
// token但没有用户信息,可能是部分数据丢失
console.warn('找到token但没有用户信息尝试保持登录状态')
// 尝试验证token并获取用户信息
try {
const isValid = await validateToken()
if (isValid) {
// 如果token有效尝试从API获取用户信息
// 这里简化处理直接使用token
setToken(storedToken)
setIsAuthenticated(true)
} else {
// token确认无效清除
handleLogout()
}
} catch (error) {
// 验证过程出错,记录日志但不登出
console.error('验证token过程中出错:', error)
// 保留token允许用户继续使用
setToken(storedToken)
setIsAuthenticated(true)
}
}
}
} catch (error) {
console.error("验证token时出错:", error)
handleLogout()
console.error("初始化认证状态时出错:", error)
// 非401错误不应强制登出
if (error instanceof Error &&
(error.message.includes('401') ||
error.message.includes('未授权') ||
error.message.includes('token'))) {
handleLogout()
}
} finally {
setIsLoading(false)
setIsInitialized(true)

View File

@@ -361,22 +361,117 @@ export default function DeviceDetailPage() {
features: updatedFeatures
} : null)
// 调用API更新服务器配置
const response = await updateDeviceTaskConfig(configUpdate)
if (response && response.code === 200) {
toast.success(`${getFeatureName(feature)}${checked ? '已启用' : '已禁用'}`)
} else {
// 如果请求失败回滚UI变更
// 使用更安全的API调用方式避免自动重定向
try {
// 获取token
const token = localStorage.getItem('token');
if (!token) {
throw new Error('未找到授权信息');
}
// 直接使用fetch而不是通过API工具
const response = await fetch(`${process.env.NEXT_PUBLIC_API_BASE_URL}/v1/task-config`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${token}`
},
body: JSON.stringify(configUpdate)
});
// 检查是否是401错误未授权这是唯一应该处理token的情况
if (response.status === 401) {
// 此处我们不立即跳转,而是给出错误提示
toast.error('认证已过期,请重新登录后再尝试操作');
console.error('API请求返回401未授权错误');
// 可以选择是否重定向到登录页面
// window.location.href = '/login';
throw new Error('认证已过期');
}
// 检查响应是否正常
if (!response.ok) {
// 所有非401的HTTP错误
console.warn(`API返回HTTP错误: ${response.status} ${response.statusText}`);
// 尝试解析错误详情
try {
const errorResult = await response.json();
// 显示详细错误信息但保持本地token
const errorMsg = errorResult?.msg || `服务器错误 (${response.status})`;
toast.error(`更新失败: ${errorMsg}`);
// 回滚UI更改
setDevice(prev => prev ? {
...prev,
features: { ...prev.features, [feature]: !checked }
} : null);
} catch (parseError) {
// 无法解析响应,可能是网络问题
console.error('无法解析错误响应:', parseError);
toast.error(`更新失败: 服务器无响应 (${response.status})`);
// 回滚UI更改
setDevice(prev => prev ? {
...prev,
features: { ...prev.features, [feature]: !checked }
} : null);
}
return; // 提前返回,避免继续处理
}
// 响应正常,尝试解析
try {
const result = await response.json();
// 检查API响应码
if (result && result.code === 200) {
toast.success(`${getFeatureName(feature)}${checked ? '已启用' : '已禁用'}`);
} else if (result && result.code === 401) {
// API明确返回401提示用户但不自动登出
toast.error('认证已过期,请重新登录后再尝试操作');
console.error('API请求返回401未授权状态码');
// 回滚UI更改
setDevice(prev => prev ? {
...prev,
features: { ...prev.features, [feature]: !checked }
} : null);
} else {
// 其他API错误
const errorMsg = result?.msg || '未知错误';
console.warn(`API返回业务错误: ${result?.code} - ${errorMsg}`);
toast.error(`更新失败: ${errorMsg}`);
// 回滚UI更改
setDevice(prev => prev ? {
...prev,
features: { ...prev.features, [feature]: !checked }
} : null);
}
} catch (parseError) {
// 无法解析响应JSON
console.error('无法解析API响应:', parseError);
toast.error('更新失败: 无法解析服务器响应');
// 回滚UI更改
setDevice(prev => prev ? {
...prev,
features: { ...prev.features, [feature]: !checked }
} : null);
}
} catch (fetchError) {
console.error('请求错误:', fetchError)
// 回滚UI更改
setDevice(prev => prev ? {
...prev,
features: { ...prev.features, [feature]: !checked }
} : null)
// 处理错误信息,使用类型断言解决字段不一致问题
const anyResponse = response as any;
const errorMsg = anyResponse ? (anyResponse.message || anyResponse.msg || '未知错误') : '未知错误';
toast.error(`更新失败: ${errorMsg}`)
// 显示友好的错误提示
toast.error('网络请求失败,请稍后重试')
}
} catch (error) {
console.error(`更新${getFeatureName(feature)}失败:`, error)