mirror of
https://github.com/Stremio/stremio-web.git
synced 2026-03-11 21:27:05 +00:00
prevent authenticated user to access the Intro route
This commit is contained in:
parent
ba25c4791d
commit
3b1ccd378e
3 changed files with 55 additions and 28 deletions
|
|
@ -6,13 +6,16 @@ const { useTranslation } = require('react-i18next');
|
|||
const { Router } = require('stremio-router');
|
||||
const { Core, Shell, Chromecast, DragAndDrop, KeyboardShortcuts, ServicesProvider } = require('stremio/services');
|
||||
const { NotFound } = require('stremio/routes');
|
||||
const { ToastProvider, CONSTANTS } = require('stremio/common');
|
||||
const { ToastProvider, CONSTANTS, withCoreSuspender } = require('stremio/common');
|
||||
const ServicesToaster = require('./ServicesToaster');
|
||||
const DeepLinkHandler = require('./DeepLinkHandler');
|
||||
const ErrorDialog = require('./ErrorDialog');
|
||||
const withProtectedRoutes = require('./withProtectedRoutes');
|
||||
const routerViewsConfig = require('./routerViewsConfig');
|
||||
const styles = require('./styles');
|
||||
|
||||
const RouterWithProtectedRoutes = withCoreSuspender(withProtectedRoutes(Router));
|
||||
|
||||
const App = () => {
|
||||
const { i18n } = useTranslation();
|
||||
const onPathNotMatch = React.useCallback(() => {
|
||||
|
|
@ -152,7 +155,7 @@ const App = () => {
|
|||
<ToastProvider className={styles['toasts-container']}>
|
||||
<ServicesToaster />
|
||||
<DeepLinkHandler />
|
||||
<Router
|
||||
<RouterWithProtectedRoutes
|
||||
className={styles['router']}
|
||||
viewsConfig={routerViewsConfig}
|
||||
onPathNotMatch={onPathNotMatch}
|
||||
|
|
|
|||
20
src/App/withProtectedRoutes.js
Normal file
20
src/App/withProtectedRoutes.js
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
const React = require('react');
|
||||
const { Intro } = require('stremio/routes');
|
||||
const { useProfile } = require('stremio/common');
|
||||
|
||||
const withProtectedRoutes = (Component) => {
|
||||
return function withProtectedRoutes(props) {
|
||||
const profile = useProfile();
|
||||
const onRouteChange = React.useCallback((routeConfig) => {
|
||||
if (profile.auth !== null && routeConfig.component === Intro) {
|
||||
window.location.replace('#/');
|
||||
return true;
|
||||
}
|
||||
}, [profile]);
|
||||
return (
|
||||
<Component {...props} onRouteChange={onRouteChange} />
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
module.exports = withProtectedRoutes;
|
||||
|
|
@ -11,7 +11,7 @@ const Route = require('../Route');
|
|||
const routeConfigForPath = require('./routeConfigForPath');
|
||||
const urlParamsForPath = require('./urlParamsForPath');
|
||||
|
||||
const Router = ({ className, onPathNotMatch, ...props }) => {
|
||||
const Router = ({ className, onPathNotMatch, onRouteChange, ...props }) => {
|
||||
const viewsConfig = React.useMemo(() => props.viewsConfig, []);
|
||||
const [views, setViews] = React.useState(() => {
|
||||
return Array(viewsConfig.length).fill(null);
|
||||
|
|
@ -42,37 +42,40 @@ const Router = ({ className, onPathNotMatch, ...props }) => {
|
|||
const urlParams = urlParamsForPath(routeConfig, typeof pathname === 'string' ? pathname : '');
|
||||
const routeViewIndex = viewsConfig.findIndex((vc) => vc.includes(routeConfig));
|
||||
const routeIndex = viewsConfig[routeViewIndex].findIndex((rc) => rc === routeConfig);
|
||||
setViews((views) => {
|
||||
return views
|
||||
.slice(0, viewsConfig.length)
|
||||
.map((view, index) => {
|
||||
if (index < routeViewIndex) {
|
||||
return view;
|
||||
} else if (index === routeViewIndex) {
|
||||
return {
|
||||
key: `${routeViewIndex}${routeIndex}`,
|
||||
component: routeConfig.component,
|
||||
urlParams: view !== null && isEqual(view.urlParams, urlParams) ?
|
||||
view.urlParams
|
||||
:
|
||||
urlParams,
|
||||
queryParams: view !== null && isEqual(Array.from(view.queryParams.entries()), Array.from(queryParams.entries())) ?
|
||||
view.queryParams
|
||||
:
|
||||
queryParams
|
||||
};
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
});
|
||||
});
|
||||
const handled = typeof onRouteChange === 'function' && onRouteChange(routeConfig, urlParams, queryParams);
|
||||
if (!handled) {
|
||||
setViews((views) => {
|
||||
return views
|
||||
.slice(0, viewsConfig.length)
|
||||
.map((view, index) => {
|
||||
if (index < routeViewIndex) {
|
||||
return view;
|
||||
} else if (index === routeViewIndex) {
|
||||
return {
|
||||
key: `${routeViewIndex}${routeIndex}`,
|
||||
component: routeConfig.component,
|
||||
urlParams: view !== null && isEqual(view.urlParams, urlParams) ?
|
||||
view.urlParams
|
||||
:
|
||||
urlParams,
|
||||
queryParams: view !== null && isEqual(Array.from(view.queryParams.entries()), Array.from(queryParams.entries())) ?
|
||||
view.queryParams
|
||||
:
|
||||
queryParams
|
||||
};
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
};
|
||||
window.addEventListener('hashchange', onLocationHashChange);
|
||||
onLocationHashChange();
|
||||
return () => {
|
||||
window.removeEventListener('hashchange', onLocationHashChange);
|
||||
};
|
||||
}, [onPathNotMatch]);
|
||||
}, [onPathNotMatch, onRouteChange]);
|
||||
return (
|
||||
<div className={classnames(className, 'routes-container')}>
|
||||
{
|
||||
|
|
@ -93,6 +96,7 @@ const Router = ({ className, onPathNotMatch, ...props }) => {
|
|||
Router.propTypes = {
|
||||
className: PropTypes.string,
|
||||
onPathNotMatch: PropTypes.func,
|
||||
onRouteChange: PropTypes.func,
|
||||
viewsConfig: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.exact({
|
||||
regexp: PropTypes.instanceOf(RegExp).isRequired,
|
||||
urlParamsNames: PropTypes.arrayOf(PropTypes.string).isRequired,
|
||||
|
|
|
|||
Loading…
Reference in a new issue