第二章：登錄頁面以及token存取

創(chuàng)建登錄頁面Login

/src/pages/login/index.tsx

我這邊簡單復(fù)制下antd示例過來

import { Form, Input, Button, Checkbox, Card } from "antd";

const Login = () => {
  const onFinish = (values: any) => {
    console.log("Success:", values);
  };

  const onFinishFailed = (errorInfo: any) => {
    console.log("Failed:", errorInfo);
  };

  return (
    <Form
      name="basic"
      labelCol={{ span: 8 }}
      wrapperCol={{ span: 16 }}
      initialValues={{ remember: true }}
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}
      autoComplete="off"
    >
      <Form.Item
        label="賬號"
        name="username"
        rules={[{ required: true, message: "Please input your username!" }]}
      >
        <Input />
      </Form.Item>

      <Form.Item
        label="密碼"
        name="password"
        rules={[{ required: true, message: "Please input your password!" }]}
      >
        <Input.Password />
      </Form.Item>

      <Form.Item
        name="remember"
        valuePropName="checked"
        wrapperCol={{ offset: 8, span: 16 }}
      >
        <Checkbox>記住賬號</Checkbox>
      </Form.Item>

      <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
        <Button type="primary" htmlType="submit">
          登錄
        </Button>
      </Form.Item>
    </Form>
  );
};

export default Login;

我們在根目錄下的index.tsx使用Login組件

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import './style/index.less'
import Login from './pages/login';

ReactDOM.render(
  <React.StrictMode>
    <Login />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

yarn start下運行后看到登錄界面

界面完后，需要考慮登錄邏輯，token的存取，這里使用react-cookies存儲token

引入react-cookies

npm install react-cookie --save
// or
yarn add react-cookie

react-cookies api簡單介紹

// 引入
import cookie from 'react-cookies'
// 存
cookie.save(‘token’, "123”,{});
// 取
cookie.load('token’);
// 刪除
cookie.remove('token')
// 存數(shù)據(jù)時設(shè)置失效時間
const oneDay = new Date(new Date().getTime() + 24 * 3600 * 1000); 
// 設(shè)置失效日期一天
cookie.save("token", "ffffffffff", { expires: oneDay });

我們這里直接在登錄成功后調(diào)用存token，并且設(shè)置失效日期為一天

const onFinish = (values: any) => {
    console.log("Success:", values);
    console.log("cookie:", cookie.load("token"));

    // 登錄成功
    setTimeout(() => {
      const oneDay = new Date(new Date().getTime() + 24 * 3600 * 1000); // 設(shè)置失效日期一天
      cookie.save("token", "ffffffffff", { expires: oneDay });
    }, 1000);
  };

提示：token是否需要存可以與后端溝通，做的好幾個項目都不需要前端對token存儲，后端直接存session里面，如果不需要可以不引入react-cookies。

到這里登陸界面與token就完成了，貼下本次的完整的登陸界面代碼

import { Form, Input, Button, Checkbox, Card } from "antd";
import cookie from "react-cookies";

const Login = () => {
  const onFinish = (values: any) => {
    console.log("Success:", values);
    console.log("cookie:", cookie.load("token"));

    // 登錄成功
    setTimeout(() => {
      const oneDay = new Date(new Date().getTime() + 24 * 3600 * 1000); // 設(shè)置失效日期一天
      cookie.save("token", "ffffffffff", { expires: oneDay });
    }, 1000);
  };

  const onFinishFailed = (errorInfo: any) => {
    console.log("Failed:", errorInfo);
  };

  return (
    <Card style={{ top: 50, width: "50%", marginLeft: "25%" }}>
      <Form
        name="basic"
        labelCol={{ span: 4 }}
        wrapperCol={{ span: 18 }}
        initialValues={{ remember: true }}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
        autoComplete="off"
      >
        <Form.Item
          label="賬號"
          name="username"
          rules={[{ required: true, message: "Please input your username!" }]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          label="密碼"
          name="password"
          rules={[{ required: true, message: "Please input your password!" }]}
        >
          <Input.Password />
        </Form.Item>

        <Form.Item
          name="remember"
          valuePropName="checked"
          wrapperCol={{ offset: 8, span: 16 }}
        >
          <Checkbox>記住賬號</Checkbox>
        </Form.Item>

        <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
          <Button type="primary" htmlType="submit">
            登錄
          </Button>
        </Form.Item>
      </Form>
    </Card>
  );
};
export default Login;