feat(web): auth store 添加 permissions 状态,从 JWT 解码提取
This commit is contained in:
@@ -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 });
|
||||||
},
|
},
|
||||||
}));
|
}));
|
||||||
|
|||||||
Reference in New Issue
Block a user