1. What is token
Token: The credentials for accessing the resource.
Generally, after users log in with their username and password, the server will digitally sign the login credentials and use the encrypted string as the token.
And carry it in the request to the server behind the client as a credential.
2. Where are the tokens usually stored?
Tokens are generally stored in localStorage, cookies, or sessionStorage, vuex on the client.
1、localStorage
- Advantages: The localStorage life cycle is permanent, which means that unless the user displays clear localStorage information on the browser-provided UI, this information will exist forever. Different pages of the same browser can share the same localStorage (the domain name and port in the page).
- Disadvantages: Data with the same attribute name will be replaced, and different browsers cannot share information in localStorage or sessionStorage.
2、sessionStorage
- Advantages: The life cycle of the sessionStorage is the current window or tab page. The data of sessionStorage will not be cleared by other windows. Pages and tab pages only refer to the top-level window. If a tab page contains multiple iframe tags and they belong to the same-origin page, then sessionStorage can be shared between them.
- Disadvantage: Once the window or tab is permanently closed, all data stored through sessionStorage will be cleared.
Store the token in the webstroage and can be accessed through js in the same domain. This will lead to a vulnerability to XSS attacks, especially when many third-party js library is introduced into the project. If the js script is stolen, the attacker can easily access your website. As a storage mechanism, webStroage will not implement any security standards during transmission.
XSS attack: cross-site Scripting (cross-site scripting attack) is a code injection attack. Malicious attackers inject script code into the target website. When visitors browse the website, they steal user information and steal user identity by executing the injected script code.
3. Store in cookies
Let it send automatically, but the disadvantage is that it cannot cross-domain
You can specify httponly when storing the token in a cookie to prevent it from being read by JavaScript, or you can specify secure to ensure that the token is transmitted only under HTTPS. The disadvantage is that it does not comply with Restful best practices and is vulnerable to CSRF attacks.
CSRF Cross-Site Request Forgery, like XSS attacks, has great harm.
Simply put, malicious attackers steal authenticated user information and perform some operations in the name of user information (such as sending emails, transferring money, purchasing goods, etc.). Since the identity has been authenticated, the target website will believe that the operations are all operated by real users. CSRF cannot obtain user information, it is just a stolen user credentials to operate.
4、Vuex
- Advantages: vuex data is stored in memory and has high confidentiality
- Disadvantages: When refreshing the page (the refresh page here refers to --> F5 refresh, which belongs to clearing the memory), the value stored in vuex will be lost.
Summary: That is to say, localStorage can store persistent data; sessionStorage is limited to the current window; vuex can store data with high confidentiality, but the data will be cleared after refreshing the page.
3. Basic token process
(1) User login, send mobile phone number and verification code
(2) Receive parameters in the background and search for the user. If the user exists, generate a token and return it to the front end
(3) The front-end login is successful, save the token to vuex (do persistent)
(4) Use the axios interceptor to read the token in vuex and put the request header
(5) If you request other interfaces, you will bring the token with you
(6) On the interface that needs to be logged in, the background obtains token, decrypts the token to obtain userId, and returns the data required by the front end.
(7) If the user uses the app next time, if the token is still within the validity period, he does not need to log in again.
The client uses the username and password to request login. The service segment receives a request to verify the username and password. After the verification is successful, the server will issue a token and then send the token to the client. After the client receives the token, it can store it.
For example, put it in a cookie or local storage. Every time the client requests resources from the server, it must bring the token issued by the server. The server receives the request and then verify the token brought in the client request. If the verification is successful, in some way, it is like randomly generating a 32-bit string as a token, storing it in the server, and returning the token to the APP.
Afterwards, when requesting the APP, you must bring the token with the place where verification is required, and then the server verifies the token, successfully returns the required result, and fails to return the error message. From the new login, the token on the server sets a valid period. Each time the APP request is requested, the token and the valid period must be verified.
The above is personal experience. I hope you can give you a reference and I hope you can support me more.