I. Login overview

  • For cookies, sessions, and tokens, the token mode is used when the cross-domain problem exists, and the cookie and session mode is used when the cross-domain problem does not exist

Two, principle analysis

  • 1. On the login page, enter the user name and password to log in
  • 2. The server generates the token of the user and returns the token to the client after the authentication succeeds
  • 3. In this case, the client stores the token
  • 4. All subsequent requests are sent to the server with the token
  • 5. The server checks whether the token exists. If yes, go to the next step

Three, to achieve login

  • Before logging in, check to see if your working environment is clean. If not, git add is required. Git commit -m ‘XXX’ and git commit -m ‘XXX’. Finally, delete unwanted file contents and run the project with a clean, nothingness project.

Create login. vue in 1.com Ent and add a style

2. Data binding

3. Form validation

4. Form reset (reset validation error)

  • 1. Add the ref attribute to the el-form

  • 2. Add a click event to the reset button

  • 3. Trigger the resetFields() function after clicking the reset button

5. Pre-verification before login

  • 1. Add a click event to the login button

  • 2. Click to obtain the reference to the form

  • Valid is the verification result and is a Boolean value

6. Configure AXIOS to initiate a login request

  • 1. If the value valid displayed in the login function is true, configure axios in main.js

(Valid value: true or false. If the form validates successfully, it conforms to the rule. Valid is true, and false is false.)

  • 2. Send the request

  • If the return value of the method result is a Promise object, we simplify the operation with async and await to get concrete data (response object), where data is real data and is what we need

7. Pop-up prompt (Message prompt in Element-UI)

  • 1. Import popup prompt components in element.js in plugins (each component can be used by this.$message if mounted to a vue prototype)

  • 2. Use methods such as SUCCESS and error as displayed in the dialog box

8. Improve the operation after login (token)

    1. After successful login, save the token in the client’s sessionStorage. Why not save it in localStorage? SessionStorage is the current session valid, localStorage is saved to memory, valid forever
    • 1.1 Other API interfaces in the project other than login can only be accessed after login
    • 1.2 Token should only take effect while the current site is open, so save the token in sessionStorage

The token value exists in the RES after successful login. You can find the token value in the Session Storage of the Application

    1. Jump to the background home page via programmatic navigation, routing address is /home

9. Route navguard controls access

Mount the route navigator before the route is exposed

4. Log out

    1. Add a click event to the log out button
    1. Clear the token and go to the login page

Commit code to a remote repository

1. Check the status

Git add. Git commit -m

3. Switch to the primary branch and merge the login branch to the primary branch

4. Submit the primary branch, switch back to the LOGIN branch, and submit the login branch to the remote repository