Umi路由鉴权

1、搭建umi脚手架

先找个地方建个空目录

$ mkdir myapp && cd myapp

通过官方工具创建项目

$ yarn create @umijs/umi-app
# 或 npx @umijs/create-umi-app

2、补全缺失的信息

npm i

3、在pages下创建Login文件夹

index.tsx文件中代码如下

import React, { useState } from 'react'
import { Button, Form, Input, message } from 'antd';
import './index.less';

export default function index(props) {
    // 消息提示
    const [messageApi, contextHolder] = message.useMessage();
    // 登录信息
    const [user, setUser] = useState({ username: 'admin', password: '123456', })
    // 登录按钮
    const onFinish = (values: any) => {
        // console.log('Success:', values);
        if (values.username != user.username) {
            messageApi.open({
                type: 'error',
                content: '请输入正确的账号',
            });
        } else if (values.password != user.password) {
            messageApi.open({
                type: 'error',
                content: '请输入正确的密码',
            });
        }
        else if (values.username === user.username && values.password === user.password) {
            messageApi.open({
                type: 'success',
                content: '登录成功',
            });
            // 登录成功后将信息进行本地存储
            window.localStorage.setItem('token', JSON.stringify(values))
            // 登录成功后切换路由
            props.history.push('/home')
        }
    };
    return (
        <div>
        	{/* 消息提示 */}
            {contextHolder}
            <Form
                name="basic"
                labelCol={{
                    span: 8,
                }}
                wrapperCol={{
                    span: 16,
                }}
                style={{
                    maxWidth: 600,
                }}
                initialValues={{
                    remember: true,
                }}
                onFinish={onFinish}
                autoComplete="off"
            >
                <Form.Item
                    label="Username"
                    name="username"
                    rules={[
                        {
                            required: true,
                            message: 'Please input your username!',
                        },
                    ]}
                >
                    <Input />
                </Form.Item>

                <Form.Item
                    label="Password"
                    name="password"
                    rules={[
                        {
                            required: true,
                            message: 'Please input your password!',
                        },
                    ]}
                >
                    <Input.Password />
                </Form.Item>
                <Form.Item
                    wrapperCol={{
                        offset: 8,
                        span: 16,
                    }}
                >
                    <Button type="primary" htmlType="submit">
                        Submit
                    </Button>
                </Form.Item>
            </Form>
        </div>
    )
}

4、在src下创建wrappers文件夹

在index.tsx文件中复制如下代码

import { Redirect } from 'umi'

export default (props: any) => {
    // 获取本地存储
    const token = window.localStorage.getItem('token');
    // 如果获取到本地存储信息则跳转页面否则不能进行跳转（留在登录页面）
    if (token) {
        return <div>{props.children}</div>;
    } else {
        return <Redirect to="/login" />;
    }
}

5、在路由文件中使用鉴权