import { create } from "zustand";
import { persist } from "zustand/middleware";
export interface AccessControlStore {
accessCode: string;
token: string;
needCode: boolean;
updateToken: (: string) => void;
updateCode: (: string) => void;
enabledAccessControl: () => boolean;
isAuthorized: () => boolean;
fetch: () => void;
}
export const ACCESS_KEY = "access-control";
let fetchState = 0; // 0 not fetch, 1 fetching, 2 done
export const useAccessStore = create<AccessControlStore>()(
persist(
(set, get) => ({
token: "",
accessCode: "",
needCode: true,
enabledAccessControl() {
get().fetch();
return get().needCode;
},
updateCode(code: string) {
set((state) => ({ accessCode: code }));
},
updateToken(token: string) {
set((state) => ({ token }));
},
isAuthorized() {
// has token or has code or disabled access control
return (
!!get().token || !!get().accessCode || !get().enabledAccessControl()
);
},
fetch() {
if (fetchState > 0) return;
fetchState = 1;
fetch("/api/config", {
method: "post",
body: null,
})
.then((res) => res.json())
.then((res: DangerConfig) => {
console.log("[Config] got config from server", res);
set(() => ({ ...res }));
})
.catch(() => {
console.error("[Config] failed to fetch config");
})
.finally(() => {
fetchState = 2;
});
},
}),
{
name: ACCESS_KEY,
version: 1,
},
),
);
This is a TypeScript module that exports a useAccessStore hook and an AccessControlStore interface. The AccessControlStore interface defines the state shape of the store and the methods that can be used to update and access it. The useAccessStore hook creates a new instance of the store and returns its state and methods.
The store has four properties: accessCode, token, needCode, and fetchState. accessCode and token store the access code and token needed for authorization, respectively. needCode is a boolean that indicates whether access control is enabled or not. fetchState is a number that indicates the state of the fetch operation for the configuration data.
The store has five methods: updateToken, updateCode, enabledAccessControl, isAuthorized, and fetch. updateToken and updateCode are used to update the token and accessCode properties, respectively. enabledAccessControl returns a boolean that indicates whether access control is enabled or not. isAuthorized returns a boolean that indicates whether the user is authorized to access the protected content. fetch is used to fetch the configuration data from the server.
你好!有什么我可以帮助你的吗?
import { create } from "zustand";
import { persist } from "zustand/middleware";
export interface AccessControlStore {
accessCode: string;
token: string;
needCode: boolean;
updateToken: (: string) => void;
updateCode: (: string) => void;
enabledAccessControl: () => boolean;
isAuthorized: () => boolean;
fetch: () => void;
}
export const ACCESS_KEY = "access-control";
let fetchState = 0; // 0 not fetch, 1 fetching, 2 done
export const useAccessStore = create<AccessControlStore>()(
persist(
(set, get) => ({
token: "",
accessCode: "",
needCode: true,
enabledAccessControl() {
get().fetch();
return get().needCode;
},
updateCode(code: string) {
set((state) => ({ accessCode: code }));
},
updateToken(token: string) {
set((state) => ({ token }));
},
isAuthorized() {
// has token or has code or disabled access control
return (
!!get().token || !!get().accessCode || !get().enabledAccessControl()
);
},
fetch() {
if (fetchState > 0) return;
fetchState = 1;
fetch("/api/config", {
method: "post",
body: null,
})
.then((res) => res.json())
.then((res: DangerConfig) => {
console.log("[Config] got config from server", res);
set(() => ({ ...res }));
})
.catch(() => {
console.error("[Config] failed to fetch config");
})
.finally(() => {
fetchState = 2;
});
},
}),
{
name: ACCESS_KEY,
version: 1,
},
),
);
This is a TypeScript module that exports a useAccessStore hook and an AccessControlStore interface. The AccessControlStore interface defines the state shape of the store and the methods that can be used to update and access it. The useAccessStore hook creates a new instance of the store and returns its state and methods.
The store has four properties: accessCode, token, needCode, and fetchState. accessCode and token store the access code and token needed for authorization, respectively. needCode is a boolean that indicates whether access control is enabled or not. fetchState is a number that indicates the state of the fetch operation for the configuration data.
The store has five methods: updateToken, updateCode, enabledAccessControl, isAuthorized, and fetch. updateToken and updateCode are used to update the token and accessCode properties, respectively. enabledAccessControl returns a boolean that indicates whether access control is enabled or not. isAuthorized returns a boolean that indicates whether the user is authorized to access the protected content. fetch is used to fetch the configuration data from the server.