dashboard/src/views/ProtectedRoute.jsx

import { useContext } from 'react';
import { Button, Result, message, Typography, Image } from 'antd';
import { stores_Context } from '../config';
import { observer } from 'mobx-react';
import { Outlet, useLocation } from 'react-router-dom';
import authExample from './../auth-apply.png';

const { Text } = Typography;

const ProtectedRoute = ({ auth }) => {
  const { auth_store } = useContext(stores_Context);

  if (auth_store.has_permission(auth)) {
    return <Outlet />;
  }

  const authApplyLink =
    // eslint-disable-next-line max-len
    'dingtalk://dingtalkclient/action/openapp?app_id=-4&container_type=work_platform&corpid=ding48bce8fd3957c96b&ddtab=true&redirect_type=jump&redirect_url=https%3A%2F%2Faflow.dingtalk.com%2Fdingtalk%2Fmobile%2Fhomepage.htm%3Fback_control%3Dfalse%26backcontrol%3Dfalse%26corpid%3Dding48bce8fd3957c96b%26dd_progress%3Dfalse%26dd_share%3Dfalse%26ddtab%3Dtrue%26showmenu%3Dfalse%23%2Fcustom%3Fpcredirect%3Dself%26processCode%3DPROC-C0C2E970-1E4E-44CF-A389-C7D3F10A7885';

  const copyToClipboard = (text) => {
    navigator.clipboard.writeText(text).then(() => {
      message.success('已复制到剪贴板');
    });
  };

  const { pathname } = useLocation();
  const applyInfo = `授权账户: ${auth_store.user.name}(${auth_store.user.userid})\n申请权限: ${auth[auth.length - 1].toString()}\n请求页面: ${pathname}`;

  return (
    <div>
      {/* '试着联系一下技术，所需权限: ' + auth.toString() */}
      <Result
        status={auth_store.user.name === 'loading' ? '500' : '403'}
        title={auth_store.user.name === 'loading' ? '无服务' : '403 权限不足'}
        // title="403 权限不足"
        subTitle={
          auth_store.user.name !== 'loading' ? (
            <>
              <div style={{ width: 300, textAlign: 'left', margin: 'auto auto' }}>
                <div>
                  <Text type={'danger'} strong>
                    申请步骤:
                  </Text>
                </div>
                <ol style={{ padding: '0 1rem' }}>
                  <li>
                    复制以下信息
                    {/* <Button type="link" onClick={() => copyToClipboard(applyInfo)}>
                      复制
                    </Button> */}
                  </li>
                  {/* <li> */}
                  <pre className={'p-s1'} style={{ border: '1px solid rgba(0,0,0,.15)', borderRadius: 4 }}>
                    {applyInfo}
                  </pre>
                  {/* </li> */}
                  <li>
                    <Button type="link" href={authApplyLink}>
                      点击打开 &raquo;OA审批 &raquo;
                    </Button>
                    <ul>
                      <li>输入申请信息(姓名等)</li>
                      <li>
                        选择开通权限: <Text type={'warning'}>HT系统分析</Text>
                      </li>
                      <li>
                        填入上述复制的信息到 <Text type={'warning'}>权限内容</Text>
                      </li>
                    </ul>
                  </li>
                </ol>
                <div>
                  <Text type={'secondary'} strong>
                    示例:
                  </Text>
                </div>
                <Image alt="example" src={authExample} preview={false} />
              </div>
            </>
          ) : null
        }
      />
    </div>
  );
};
export default observer(ProtectedRoute);