One: Clear the login page

I use the Antd Desgin Pro framework for my personal blog, so I need to clear the login page and be aware of the limitations of 401.

Mock interface. Let’s leave it alone for now. After all the related mock invocation methods are cleared, you can see that many pages have many warnings. You just need to delete the warnings, and then delete the mock interface

First came tosrc/app.tsxUnder the file

    const loginPath = '/user/login';
Copy the code

Looking at this line of code, search for where loginPath is used on this page.

In the getInitialState method, you declare the fetchUserInfo method, and you can see that if there is an error in this interface, the code catches the error and forces a jump to the login page. If you are interested, you can print it out. This interface is equivalent to the interface for obtaining user information in our ordinary business. In the development of business, it will also return the user’s token.

In getInitialState, it makes a judgment call. If it is a login interface, it will not change the method, it will return the method, and it will return the config/defaultSettings file that exposes the configuration. Why expose these things? Detailed analysis will be made later.

Here, all we need to know is the getInitialState method, which is Antd Desgin Pro’s method to verify that the user is logged in.

If we do not need the login page, also do not need verification, can comment or delete this, will not enter the page, forced to jump to the login page

In fact, in business, if the user logs in and stays on this page for too long, how should we remind the user that the token is invalid and log in again? In fact, Antd Desgin Pro is also reflected here

As you can see, there is a method in the Api of the ProLayout component that is triggered when the onPageChange page is switched. The system checks whether the user’s token is invalid. If the token is invalid, the system forcibly switches to the login page. Since I’m using this to build my personal blog, I don’t need any of it, I’ll just comment it all out. If necessary, reasonable arrangements can be made

Two: Configure the reverse proxy

config/proxy.tsfile

There are officially 3 different environments built for us in advance: Development environment (Dev), test environment (Test) and official environment (Pre).

How to boot up different environments,package.jsonFile scripts

  • yarn startThe dev environment is run by default
  • yarn run start:devRunning the Dev environment
  • yarn run start:testRunning the Test environment
  • yarn run start:preRunning the Pre environment

In fact, eventually, the entire configuration file will be imported intoconfig/config.tsThe function of this file will be analyzed in detail later

Three: The development environment comes with Dumi documents

At the bottom of the home page menu, business Component documentation

Click to go to the component documentation page

insrc/app.tsThe ProLayout Api configuration jumps to a route

The file shown is the MD file, and we can see that one exists in the root directoryREADME.mdFile,src/componentsThere is also one under the fileindex.mdFiles. Currently there are two MD files in the project, so enter the document mode and you can see the page transformed from these two MD files

insrc/pages/TableListnewindex.mdFile, using the MD syntax, enter the instructions for a component, refresh the page, and you can see that the system has rendered our new MD file to the page

For syntax and configuration questions, check out Dumi’s official website

4. Configure some routing items

Let’s take a look at the official type restriction on routes

Export interface MenuDataItem {/** @name */ routes? : MenuDataItem[]; /** @name Hide child node in menu */ hideChildrenInMenu? : boolean; /** @name hide yourself and child nodes in the menu */ hideInMenu? : boolean; /** @name hideInBreadcrumb */ hideInBreadcrumb? : boolean; /** @name menu icon */ icon? : React.ReactNode; /** @name Specifies the menu's international key */ locale? : string | false; /** @name Menu name */ name? : string; /** @name specifies the selected value. The default is path */ key? : string; /** @name disable Menu option */ disabled? : boolean; /** @name, can be set to webpage link */ path? : string; /** * @deprecated This node will be deprecated when it is deprecated * @name custom parent */ parentKeys? : string[]; /** @name hides itself and raises its child node to the level of its own */ flatMenu? : boolean; /** @name specifies the external chain opening form, the same as a tag */ target? : string; [key: string]: any; }Copy the code

Several commonly used apis

  • pathUrl path of the route
  • hideInMenuWhether to display itself and child routes in the menu
  • layoutShow menu or not
  • iconicon
  • componentThe rendered component is found here by relative path
  • targetOpen the outer chain

Product and double 叒 change demand…