feat(web): auth store 添加 permissions 状态,从 JWT 解码提取

This commit is contained in:
iven
2026-04-25 23:23:28 +08:00
parent 78647d6cc4
commit 9f25112861

View File

@@ -1,21 +1,31 @@
import { create } from 'zustand'; import { create } from 'zustand';
import { login as apiLogin, logout as apiLogout, type UserInfo } from '../api/auth'; import { login as apiLogin, logout as apiLogout, type UserInfo } from '../api/auth';
// Synchronously restore auth state from localStorage at store creation time. function extractPermissions(): string[] {
// This eliminates the flash-of-login-page on refresh because isAuthenticated const token = localStorage.getItem('access_token');
// is already `true` before the first render. if (!token) return [];
function restoreInitialState(): { user: UserInfo | null; isAuthenticated: boolean } { try {
const parts = token.split('.');
if (parts.length !== 3) return [];
const payload = JSON.parse(atob(parts[1].replace(/-/g, '+').replace(/_/g, '/')));
return Array.isArray(payload.permissions) ? payload.permissions : [];
} catch {
return [];
}
}
function restoreInitialState(): { user: UserInfo | null; isAuthenticated: boolean; permissions: string[] } {
const token = localStorage.getItem('access_token'); const token = localStorage.getItem('access_token');
const userStr = localStorage.getItem('user'); const userStr = localStorage.getItem('user');
if (token && userStr) { if (token && userStr) {
try { try {
const user = JSON.parse(userStr) as UserInfo; const user = JSON.parse(userStr) as UserInfo;
return { user, isAuthenticated: true }; return { user, isAuthenticated: true, permissions: extractPermissions() };
} catch { } catch {
localStorage.removeItem('user'); localStorage.removeItem('user');
} }
} }
return { user: null, isAuthenticated: false }; return { user: null, isAuthenticated: false, permissions: [] };
} }
const initial = restoreInitialState(); const initial = restoreInitialState();
@@ -24,6 +34,7 @@ interface AuthState {
user: UserInfo | null; user: UserInfo | null;
isAuthenticated: boolean; isAuthenticated: boolean;
loading: boolean; loading: boolean;
permissions: string[];
login: (username: string, password: string) => Promise<void>; login: (username: string, password: string) => Promise<void>;
logout: () => Promise<void>; logout: () => Promise<void>;
loadFromStorage: () => void; loadFromStorage: () => void;
@@ -33,6 +44,7 @@ export const useAuthStore = create<AuthState>((set) => ({
user: initial.user, user: initial.user,
isAuthenticated: initial.isAuthenticated, isAuthenticated: initial.isAuthenticated,
loading: false, loading: false,
permissions: initial.permissions,
login: async (username, password) => { login: async (username, password) => {
set({ loading: true }); set({ loading: true });
@@ -41,7 +53,7 @@ export const useAuthStore = create<AuthState>((set) => ({
localStorage.setItem('access_token', resp.access_token); localStorage.setItem('access_token', resp.access_token);
localStorage.setItem('refresh_token', resp.refresh_token); localStorage.setItem('refresh_token', resp.refresh_token);
localStorage.setItem('user', JSON.stringify(resp.user)); localStorage.setItem('user', JSON.stringify(resp.user));
set({ user: resp.user, isAuthenticated: true, loading: false }); set({ user: resp.user, isAuthenticated: true, loading: false, permissions: extractPermissions() });
} catch (error) { } catch (error) {
set({ loading: false }); set({ loading: false });
throw error; throw error;
@@ -57,13 +69,11 @@ export const useAuthStore = create<AuthState>((set) => ({
localStorage.removeItem('access_token'); localStorage.removeItem('access_token');
localStorage.removeItem('refresh_token'); localStorage.removeItem('refresh_token');
localStorage.removeItem('user'); localStorage.removeItem('user');
set({ user: null, isAuthenticated: false }); set({ user: null, isAuthenticated: false, permissions: [] });
}, },
// Kept for backward compatibility but no longer needed since
// initial state is restored synchronously at store creation.
loadFromStorage: () => { loadFromStorage: () => {
const state = restoreInitialState(); const state = restoreInitialState();
set({ user: state.user, isAuthenticated: state.isAuthenticated }); set({ user: state.user, isAuthenticated: state.isAuthenticated, permissions: state.permissions });
}, },
})); }));