36、微应用安全保障全解析

微应用安全保障全解析

1. 微应用权限与路由控制

1.1 微应用角色配置

在微应用的清单文件中，我们可以包含所需的角色信息，示例如下：

"mount-points": {
    "left-nav": [{..., "role": "Admin", ...}, ...]
}

这样可以在组件渲染时进行条件判断，确保只有具有相应角色的用户才能看到特定组件。

1.2 受保护路由

用户可以手动在浏览器导航栏输入路由来访问页面，为了防止未授权用户访问，我们需要保护路由。以下是创建受保护路由组件的代码示例：

import React from 'react';
import {Route, Redirect} from 'react-router-dom';
import {useAuth} from './auth';

const ProtectedRoute = ({component: Component, role, ...rest}) => {
  const {hasRole} = useAuth();
  return <Route {...rest} render={
    props => hasRole(role) ?
        <Component {...rest} {...props} /> :
        <Redirect to='/' />
    } />;
};