Use useAuth hook
This commit is contained in:
parent
03a2fff2a5
commit
9b97e3279b
2 changed files with 141 additions and 143 deletions
|
@ -26,6 +26,7 @@ import {
|
||||||
interface AuthProviderProps {
|
interface AuthProviderProps {
|
||||||
children: React.ReactNode;
|
children: React.ReactNode;
|
||||||
}
|
}
|
||||||
|
|
||||||
const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
|
const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
|
||||||
const intl = useIntl();
|
const intl = useIntl();
|
||||||
const notify = useNotifier();
|
const notify = useNotifier();
|
||||||
|
@ -136,7 +137,7 @@ export const useAuth = () => {
|
||||||
isAuthenticated,
|
isAuthenticated,
|
||||||
tokenAuthLoading: user.tokenAuthLoading,
|
tokenAuthLoading: user.tokenAuthLoading,
|
||||||
tokenVerifyLoading: user.tokenVerifyLoading,
|
tokenVerifyLoading: user.tokenVerifyLoading,
|
||||||
user
|
user: user.user
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
281
src/index.tsx
281
src/index.tsx
|
@ -20,7 +20,7 @@ import { appsSection } from "./apps/urls";
|
||||||
import AttributeSection from "./attributes";
|
import AttributeSection from "./attributes";
|
||||||
import { attributeSection } from "./attributes/urls";
|
import { attributeSection } from "./attributes/urls";
|
||||||
import Auth, { getAuthToken, removeAuthToken } from "./auth";
|
import Auth, { getAuthToken, removeAuthToken } from "./auth";
|
||||||
import AuthProvider from "./auth/AuthProvider";
|
import AuthProvider, { useAuth } from "./auth/AuthProvider";
|
||||||
import LoginLoading from "./auth/components/LoginLoading/LoginLoading";
|
import LoginLoading from "./auth/components/LoginLoading/LoginLoading";
|
||||||
import SectionRoute from "./auth/components/SectionRoute";
|
import SectionRoute from "./auth/components/SectionRoute";
|
||||||
import { isJwtError } from "./auth/errors";
|
import { isJwtError } from "./auth/errors";
|
||||||
|
@ -138,7 +138,9 @@ const App: React.FC = () => {
|
||||||
<BackgroundTasksProvider>
|
<BackgroundTasksProvider>
|
||||||
<AppStateProvider>
|
<AppStateProvider>
|
||||||
<ShopProvider>
|
<ShopProvider>
|
||||||
<Routes />
|
<AuthProvider>
|
||||||
|
<Routes />
|
||||||
|
</AuthProvider>
|
||||||
</ShopProvider>
|
</ShopProvider>
|
||||||
</AppStateProvider>
|
</AppStateProvider>
|
||||||
</BackgroundTasksProvider>
|
</BackgroundTasksProvider>
|
||||||
|
@ -154,150 +156,145 @@ const App: React.FC = () => {
|
||||||
const Routes: React.FC = () => {
|
const Routes: React.FC = () => {
|
||||||
const intl = useIntl();
|
const intl = useIntl();
|
||||||
const [, dispatchAppState] = useAppState();
|
const [, dispatchAppState] = useAppState();
|
||||||
|
const {
|
||||||
|
hasToken,
|
||||||
|
isAuthenticated,
|
||||||
|
tokenAuthLoading,
|
||||||
|
tokenVerifyLoading,
|
||||||
|
user
|
||||||
|
} = useAuth();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<WindowTitle title={intl.formatMessage(commonMessages.dashboard)} />
|
<WindowTitle title={intl.formatMessage(commonMessages.dashboard)} />
|
||||||
<AuthProvider>
|
{isAuthenticated && !tokenAuthLoading && !tokenVerifyLoading ? (
|
||||||
{({
|
<AppLayout>
|
||||||
hasToken,
|
<Navigator />
|
||||||
isAuthenticated,
|
<ErrorBoundary
|
||||||
tokenAuthLoading,
|
onError={() =>
|
||||||
tokenVerifyLoading,
|
dispatchAppState({
|
||||||
user
|
payload: {
|
||||||
}) =>
|
error: "unhandled"
|
||||||
isAuthenticated && !tokenAuthLoading && !tokenVerifyLoading ? (
|
},
|
||||||
<AppLayout>
|
type: "displayError"
|
||||||
<Navigator />
|
})
|
||||||
<ErrorBoundary
|
}
|
||||||
onError={() =>
|
>
|
||||||
dispatchAppState({
|
<Switch>
|
||||||
payload: {
|
<SectionRoute exact path="/" component={HomePage} />
|
||||||
error: "unhandled"
|
<SectionRoute
|
||||||
},
|
permissions={[PermissionEnum.MANAGE_PRODUCTS]}
|
||||||
type: "displayError"
|
path="/categories"
|
||||||
})
|
component={CategorySection}
|
||||||
}
|
/>
|
||||||
>
|
<SectionRoute
|
||||||
<Switch>
|
permissions={[PermissionEnum.MANAGE_PRODUCTS]}
|
||||||
<SectionRoute exact path="/" component={HomePage} />
|
path="/collections"
|
||||||
<SectionRoute
|
component={CollectionSection}
|
||||||
permissions={[PermissionEnum.MANAGE_PRODUCTS]}
|
/>
|
||||||
path="/categories"
|
<SectionRoute
|
||||||
component={CategorySection}
|
permissions={[PermissionEnum.MANAGE_USERS]}
|
||||||
/>
|
path="/customers"
|
||||||
<SectionRoute
|
component={CustomerSection}
|
||||||
permissions={[PermissionEnum.MANAGE_PRODUCTS]}
|
/>
|
||||||
path="/collections"
|
<SectionRoute
|
||||||
component={CollectionSection}
|
permissions={[PermissionEnum.MANAGE_DISCOUNTS]}
|
||||||
/>
|
path="/discounts"
|
||||||
<SectionRoute
|
component={DiscountSection}
|
||||||
permissions={[PermissionEnum.MANAGE_USERS]}
|
/>
|
||||||
path="/customers"
|
<SectionRoute
|
||||||
component={CustomerSection}
|
permissions={[PermissionEnum.MANAGE_PAGES]}
|
||||||
/>
|
path="/pages"
|
||||||
<SectionRoute
|
component={PageSection}
|
||||||
permissions={[PermissionEnum.MANAGE_DISCOUNTS]}
|
/>
|
||||||
path="/discounts"
|
<SectionRoute
|
||||||
component={DiscountSection}
|
permissions={[PermissionEnum.MANAGE_PLUGINS]}
|
||||||
/>
|
path="/plugins"
|
||||||
<SectionRoute
|
component={PluginsSection}
|
||||||
permissions={[PermissionEnum.MANAGE_PAGES]}
|
/>
|
||||||
path="/pages"
|
<SectionRoute
|
||||||
component={PageSection}
|
permissions={[PermissionEnum.MANAGE_ORDERS]}
|
||||||
/>
|
path="/orders"
|
||||||
<SectionRoute
|
component={OrdersSection}
|
||||||
permissions={[PermissionEnum.MANAGE_PLUGINS]}
|
/>
|
||||||
path="/plugins"
|
<SectionRoute
|
||||||
component={PluginsSection}
|
permissions={[PermissionEnum.MANAGE_PRODUCTS]}
|
||||||
/>
|
path="/products"
|
||||||
<SectionRoute
|
component={ProductSection}
|
||||||
permissions={[PermissionEnum.MANAGE_ORDERS]}
|
/>
|
||||||
path="/orders"
|
<SectionRoute
|
||||||
component={OrdersSection}
|
permissions={[PermissionEnum.MANAGE_PRODUCTS]}
|
||||||
/>
|
path="/product-types"
|
||||||
<SectionRoute
|
component={ProductTypesSection}
|
||||||
permissions={[PermissionEnum.MANAGE_PRODUCTS]}
|
/>
|
||||||
path="/products"
|
<SectionRoute
|
||||||
component={ProductSection}
|
permissions={[PermissionEnum.MANAGE_STAFF]}
|
||||||
/>
|
path="/staff"
|
||||||
<SectionRoute
|
component={StaffSection}
|
||||||
permissions={[PermissionEnum.MANAGE_PRODUCTS]}
|
/>
|
||||||
path="/product-types"
|
<SectionRoute
|
||||||
component={ProductTypesSection}
|
permissions={[PermissionEnum.MANAGE_STAFF]}
|
||||||
/>
|
path="/permission-groups"
|
||||||
<SectionRoute
|
component={PermissionGroupSection}
|
||||||
permissions={[PermissionEnum.MANAGE_STAFF]}
|
/>
|
||||||
path="/staff"
|
<SectionRoute
|
||||||
component={StaffSection}
|
permissions={[PermissionEnum.MANAGE_SETTINGS]}
|
||||||
/>
|
path="/site-settings"
|
||||||
<SectionRoute
|
component={SiteSettingsSection}
|
||||||
permissions={[PermissionEnum.MANAGE_STAFF]}
|
/>
|
||||||
path="/permission-groups"
|
<SectionRoute
|
||||||
component={PermissionGroupSection}
|
permissions={[PermissionEnum.MANAGE_SETTINGS]}
|
||||||
/>
|
path="/taxes"
|
||||||
<SectionRoute
|
component={TaxesSection}
|
||||||
permissions={[PermissionEnum.MANAGE_SETTINGS]}
|
/>
|
||||||
path="/site-settings"
|
<SectionRoute
|
||||||
component={SiteSettingsSection}
|
permissions={[PermissionEnum.MANAGE_SHIPPING]}
|
||||||
/>
|
path="/shipping"
|
||||||
<SectionRoute
|
component={ShippingSection}
|
||||||
permissions={[PermissionEnum.MANAGE_SETTINGS]}
|
/>
|
||||||
path="/taxes"
|
<SectionRoute
|
||||||
component={TaxesSection}
|
permissions={[PermissionEnum.MANAGE_TRANSLATIONS]}
|
||||||
/>
|
path="/translations"
|
||||||
<SectionRoute
|
component={TranslationsSection}
|
||||||
permissions={[PermissionEnum.MANAGE_SHIPPING]}
|
/>
|
||||||
path="/shipping"
|
<SectionRoute
|
||||||
component={ShippingSection}
|
permissions={[PermissionEnum.MANAGE_MENUS]}
|
||||||
/>
|
path={navigationSection}
|
||||||
<SectionRoute
|
component={NavigationSection}
|
||||||
permissions={[PermissionEnum.MANAGE_TRANSLATIONS]}
|
/>
|
||||||
path="/translations"
|
<SectionRoute
|
||||||
component={TranslationsSection}
|
permissions={[PermissionEnum.MANAGE_PRODUCTS]}
|
||||||
/>
|
path={attributeSection}
|
||||||
<SectionRoute
|
component={AttributeSection}
|
||||||
permissions={[PermissionEnum.MANAGE_MENUS]}
|
/>
|
||||||
path={navigationSection}
|
<SectionRoute
|
||||||
component={NavigationSection}
|
permissions={[PermissionEnum.MANAGE_APPS]}
|
||||||
/>
|
path={appsSection}
|
||||||
<SectionRoute
|
component={AppsSection}
|
||||||
permissions={[PermissionEnum.MANAGE_PRODUCTS]}
|
/>
|
||||||
path={attributeSection}
|
<SectionRoute
|
||||||
component={AttributeSection}
|
permissions={[PermissionEnum.MANAGE_PRODUCTS]}
|
||||||
/>
|
path={warehouseSection}
|
||||||
<SectionRoute
|
component={WarehouseSection}
|
||||||
permissions={[PermissionEnum.MANAGE_APPS]}
|
/>
|
||||||
path={appsSection}
|
{createConfigurationMenu(intl).filter(menu =>
|
||||||
component={AppsSection}
|
menu.menuItems.map(item => hasPermission(item.permission, user))
|
||||||
/>
|
).length > 0 && (
|
||||||
<SectionRoute
|
<SectionRoute
|
||||||
permissions={[PermissionEnum.MANAGE_PRODUCTS]}
|
exact
|
||||||
path={warehouseSection}
|
path="/configuration"
|
||||||
component={WarehouseSection}
|
component={ConfigurationSection}
|
||||||
/>
|
/>
|
||||||
{createConfigurationMenu(intl).filter(menu =>
|
)}
|
||||||
menu.menuItems.map(item =>
|
<Route component={NotFound} />
|
||||||
hasPermission(item.permission, user)
|
</Switch>
|
||||||
)
|
</ErrorBoundary>
|
||||||
).length > 0 && (
|
</AppLayout>
|
||||||
<SectionRoute
|
) : hasToken && tokenVerifyLoading ? (
|
||||||
exact
|
<LoginLoading />
|
||||||
path="/configuration"
|
) : (
|
||||||
component={ConfigurationSection}
|
<Auth hasToken={hasToken} />
|
||||||
/>
|
)}
|
||||||
)}
|
|
||||||
<Route component={NotFound} />
|
|
||||||
</Switch>
|
|
||||||
</ErrorBoundary>
|
|
||||||
</AppLayout>
|
|
||||||
) : hasToken && tokenVerifyLoading ? (
|
|
||||||
<LoginLoading />
|
|
||||||
) : (
|
|
||||||
<Auth hasToken={hasToken} />
|
|
||||||
)
|
|
||||||
}
|
|
||||||
</AuthProvider>
|
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
Loading…
Reference in a new issue