page d'accueil
Si vous accédez au projet sans vous connecter, la page initiale passera directement à la page Bienvenue*. À partir de la configuration du routage, nous pouvons voir que si nous accédons à http://localhost:8000/ , les seules routes correspondantes seront * redirigées vers le composant * Bienvenue* .
Disposition du framework et composants principaux
Le routage passe par les composants SecurityLayout **, BasicLayout et BlankLayout ** en haut . Alors quelles sont les fonctions de ces trois composants ?
Composant BlankLayout
Emplacement du composant : src/layouts/BlankLayout , ce composant est le composant de niveau supérieur du projet et peut mieux afficher les invites d'erreur en mode développement. Le composant actuel peut être compris comme un composant vide.
import React from 'react';
import { Inspector } from 'react-dev-inspector';
const InspectorWrapper = process.env.NODE_ENV === 'development' ? Inspector : React.Fragment;
const Layout: React.FC = ({ children }) => {
// {children} 是dom内容,可以理解为 vue中的插槽
// dom的内容会直接被解析到这里
// InspectorWrapper 是根据是否为开发模式而替换为 Inspector 或正常的React虚拟组件
// Inspector 可以使我们在开发阶段 代码报错 提示的更友好
return <InspectorWrapper>{children}</InspectorWrapper>;
};
export default Layout;
Composant SecurityLayout
Emplacement du composant : src/layouts/SecurityLayout , comme son nom l'indique, ce composant doit avoir un certain contrôle sur l'accès sécurisé.
Ici, le jugement logique de savoir s'il faut ou non se connecter est mis en œuvre : si vous êtes connecté, <PageLoading /> le composant sera affiché ; si vous n'êtes pas connecté , redirigez vers /user/login ; si la connexion réussit, renvoyez le composant enfant.
render() {
// 组件是否渲染完毕
const { isReady } = this.state;
// loading为获取user用户信息的网络请求状态 由dva-loading管控
const { children, loading, currentUser } = this.props;
// You can replace it to your authentication rule (such as check token exists)
// 你可以把它替换成你自己的登录认证规则（比如判断 token 是否存在）
const isLogin = currentUser && currentUser.userid;
const queryString = stringify({
redirect: window.location.href,
});
// 未登录 且在loading状态 或者组件未渲染完毕
if ((!isLogin && loading) || !isReady) {
return <PageLoading />;
}
// 未登录 且跳转未非登录页
if (!isLogin && window.location.pathname !== '/user/login') {
return <Redirect to={`/user/login?${queryString}`} />;
}
return children;
}
Composant BasicLayout
Le composant actuel est le composant principal de la mise en page backend et est implémenté à l'aide de ProLayout .
ProLayout est un composant avancé packagé sur la base de la conception ant. ProLayout peut fournir une mise en page standard standard mais flexible au milieu et au backend, et en même temps le temps fournit des formulaires de mise en page Switch en un clic, génère automatiquement des menus et d'autres fonctions. Utilisé conjointement avec PageContainer, il peut générer automatiquement des fils d'Ariane, des titres de page et fournir une solution peu coûteuse pour accéder à la barre d'outils de pied de page. Les fonctions liées aux
autorisations de pageAuthorized sont contrôlées par une combinaison de configuration de composant et d'itinéraire. L'idée générale est de comparer le rôle de l'utilisateur actuel * avec les autorisations de l' Authorized attribut du composant * l'autoriténoMatch pour contrôler si le contenu du composant est rendu ou rendu dans le composant correspondant. Cette idée d'implémentation est à peu près la même que l'idée que nous avons dans le modèle vue-element-admin, mais elle est différente de l'idée des autorisations dynamiques dans notre cours. La partie autorisations sera expliquée en détail plus tard, donc vous pouvez l'ignorer pour l'instant.
/**
* Ant Design Pro v4 use `@ant-design/pro-layout` to handle Layout.
* @see You can view component api by: https://github.com/ant-design/ant-design-pro-layout
*/
...
return (
<ProLayout
logo={logo}
formatMessage={formatMessage}
{...props}
{...settings}
onCollapse={handleMenuCollapse}
onMenuHeaderClick={() => history.push('/')}
menuItemRender={(menuItemProps, defaultDom) => {
if (
menuItemProps.isUrl ||
!menuItemProps.path ||
location.pathname === menuItemProps.path
) {
return defaultDom;
}
return <Link to={menuItemProps.path}>{defaultDom}</Link>;
}}
breadcrumbRender={(routers = []) => [
{
path: '/',
breadcrumbName: formatMessage({ id: 'menu.home' }),
},
...routers,
]}
itemRender={(route, params, routes, paths) => {
const first = routes.indexOf(route) === 0;
return first ? (
<Link to={paths.join('/')}>{route.breadcrumbName}</Link>
) : (
<span>{route.breadcrumbName}</span>
);
}}
footerRender={() => {
if (settings.footerRender || settings.footerRender === undefined) {
return defaultFooterDom;
}
return null;
}}
menuDataRender={menuDataRender}
rightContentRender={() => <RightContent />}
postMenuData={(menuData) => {
menuDataRef.current = menuData || [];
return menuData || [];
}}
>
// 这里是权限控制 可以通过当前用户的角色 和authority 的角色列表做对比
// 当前项目不用考虑页面权限, 具体实现会在后续的教程里体现
<Authorized authority={authorized!.authority} noMatch={noMatch}>
{children}
</Authorized>
</ProLayout>
);
};
比如 config/route.ts 路由部分权限配置
...
routes: [
{
path: '/admin/sub-page',
name: 'sub-page',
icon: 'smile',
component: './Welcome',
authority: ['admin'],
},
],Composant UserLayout
Le composant actuel est un composant conteneur qui enveloppe la page de connexion de l'utilisateur. Vous pouvez définir le titre de la page Web, la méta, les options d'internationalisation, le logo de la page de connexion, le pied de page et d'autres fonctions via le composant actuel.
return (
<HelmetProvider>
<Helmet>
<title>{title}</title>
<meta name="description" content={title} />
</Helmet>
<div className={styles.container}>
<div className={styles.lang}>
<SelectLang />
</div>
<div className={styles.content}>
<div className={styles.top}>
<div className={styles.header}>
<Link to="/">
<img alt="logo" className={styles.logo} src={logo} />
<span className={styles.title}>Ant Design</span>
</Link>
</div>
<div className={styles.desc}>
<FormattedMessage
id="pages.layouts.userLayout.title"
defaultMessage="Ant Design 是西湖区最具影响力的 Web 设计规范"
/>
</div>
</div>
// Login组件在这里渲染
{children}
</div>
<DefaultFooter />
</div>
</HelmetProvider>
);Page de connexion
Nous pouvons accéder directement http://localhost:8000/user/login pour accéder à la page de connexion, ou cliquer pour lancer en arrière-plan pour accéder à la page de connexion. Après vous être connecté au composant correspondant de la page de connexion, la barre latérale a une fonction de page de gestionpages/User/login/index.tsx
supplémentaire . Cette page ne fera que apparaît admin * est *rôle après la connexion et le
src/layouts/BasicLayout.tsx Partie de code pour le contrôle des autorisations :
/** Use Authorized check all menu item */
const menuDataRender = (menuList: MenuDataItem[]): MenuDataItem[] =>
menuList.map((item) => {
const localItem = {
...item,
children: item.children ? menuDataRender(item.children) : undefined,
};
// 使用Authorized鉴权判断当前sideItem是否被渲染
return Authorized.check(item.authority, localItem, null) as MenuDataItem;
});
Résumer
Nous avons essentiellement compris la structure de base du modèle de cadre backend ant design pro. Ensuite, nous devons développer en fonction de nos propres besoins. Parce que la
page de connexion du modèle par défaut est relativement complexe et ne répond pas à nos besoins, nous pouvons remplacer le login requis par nous-mêmes.Modèle.Nous commencerons le développement spécifique dans la section suivante.
