The time reason is concise and concise, and the important things are extracted. If you don’t understand the details, you can Baidu by yourself.
1. Registration
I won't say much about registration, everyone has their own static interface. The logic of the code is not bad, get the api interface, Vuex, etc.
Two, login
1. Login service (token)
Register before logging in, and store user information (name, password) through the database
When the login is successful, in order to distinguish who the user is, the server issues a token [token: unique identifier].
If the login is successful, the token is displayed. If you see that you have a token, then you have successfully logged in.
2. After login
After logging in, you can see your username on the homepage
When the user logs in and sends a request to the server (the component dispatches action: userInfo), the token is successfully obtained after logging in, stored in the warehouse (non-persistent), and then the route jumps to the home page. Therefore, the action must be dispatched on the homepage (mounted) to obtain user information and dynamically display the content of the header component. vuex gets user information. The token cannot be seen in the web page, so the request interceptor in the request.js file needs to add the code that needs to carry the token to the server. Then use some vue instructions to display dynamically in the component, and you can see what to exit. But once the home page is refreshed, user information cannot be obtained (token: vuex non-persistent storage)
3. Persistent storage token
Use local storage: localStorage , store the token in localStorage, just add a line of code, and encapsulate the function once
4. Log out and clear the token
Bind a click event to the logout button, configure the API for logout, write code for actions and mutations in vuex, and write click events for components