Article directory
Preface
I recently learned Vue3. This article mainly shares a project based on Vue3 + TypeScript, using Mock.js to simulate back-end data, and axios to implement requests to complete a login function.
1. Vue3 + Element Plus + Mock.js + axios to implement login function
1. Configure routing and write form content on the login page
Configure routing in router/index.ts:
Write the login form. The data bound in el-form must be consistent with the content defined below.
The effect is as follows:
2. Write form validation rules
Take a look at the effect:
3. Login triggers form pre-validation
Here we use the validate method in the Element Plus form to verify the entire form.
This form node is called ruleFormRef. Since there is no this in the setup, we cannot get the node through this.$refs.xxx like in Vue2. We can use ref in setup to redefine a variable with the same name, and then they will be automatically associated.
Click the login button to trigger the verification:
Click the login button to verify:
4.Mock.js simulates login request
For the use of Mock.js, you can read the previously recorded blogMock.js learning. Simulate a post request in Mock.js. The first parameter is the intercepted request path, the second parameter is the intercepted request method, and the third parameter is the processing logic after interception. The params in the callback function are carried in the request body. parameter.
Then restrict the user name and password in the mock login request. Only when both are entered correctly can the token be obtained. The token value is generated using the Mock random function.
5.Vue3 introduces the use of axios
To install axios, enter the following command:
npm install axios --save
is introduced and mounted globally in Vue3 according to the previous writing method of Vue2, and an error will be reported.
Vue3 is written as follows:
Introduce axios directly on the login page, import axios and you can use it directly~
Then call the post login request simulated by Mock.js:
Verify:
Enter the correct account and password, you can obtain the data returned by the request and get the token.
If you enter an incorrect account password, the token value will not be returned.
注意：mock只是模拟数据,不会在network中显示,只有真实的请求才会在network中显示。
Log in successfully and jump to the homepage.
router.push("/home");
2. Interview questions
1. Front-end login process
① Click "Login" on the login page, and the front-end will call the back-end login interface with the user name and password to request login;
② After the back-end receives the request, it will verify the user name and password. If the verification fails, relevant error information will be returned, and the front-end will prompt the corresponding error message; if the verification is successful, a token value corresponding to the current user will be generated and the front-end token will be returned;
③ After the front end gets the token, it stores the token (can be stored in localStorage, sessionStorage, cookie, vuex), and jumps to the page to successfully log in;
④ Every time the front end makes a request to the back end When using resources, you must carry the token issued by the backend. If the front end carries the token when initiating the next request, the server will verify which user you are based on the submitted token value, thereby returning different results based on your operation;
⑤Finally , when sending other requests to the backend, we generally need to bring this token value in the request header. In the project, we usually encapsulate it in a request interceptor. The backend determines whether there is the token in the request header. If so, Then verify the token. If the verification is successful, the data will be returned normally. If the verification fails, such as expiration, the corresponding error code will be returned. The front end will get the relevant error information, clear the token, and return to the login page.
2.What is token?
token means token, which is an encrypted string generated by the server when the user logs in for the first time, and then returned to the client.
Every time the client requests resources from the server, it only needs to bring the token to request data. There is no need to bring the user name and password to request. The server directly decrypts the token to know the user's identity. Related Information. Since basically all requests need to carry a token, we can encapsulate them uniformly in the request interceptor so that every request can carry a token.