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