There is a single-page application URL such as http://cctv.com/!#/car/list
. I can only access this URL when I am logged in. If I am not logged in, I have to jump to the login page.
In the past, if you requested the url to the background, the background would determine whether the current user is logged in, but now it is a single-page application, and there is no need to request to the background. So in the case of a single-page application, how to handle whether the user is logged in? What about the status of logged in?
给我你的怀抱2017-05-15 17:11:32
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
|
1 2 3 4 5 |
|
Monitor url
changes, if it is not login logout, check the login status.
Check login status
Check js variables and jump directly to the login page without logging in
If the js variable has been logged in, determine whether asynchronous detection is needed and end if no detection is required (for example, the last detection was within 60 seconds).
If asynchronous detection is required, asynchronously check whether to log in, and if successful, refresh the timelastcheck
.
If you detect that you are not logged in, jump directly to the login page
伊谢尔伦2017-05-15 17:11:32
After logging in, the back-end api gives the token, the front-end stores the token, and passes the token if you need to log in for access. The front-end routing determines whether there is a token, and if not, log in. In addition, the front-end has error handling for asynchronous interactive APIs. For example, the back-end error code indicates that the token has expired. The front-end clears the previous token and switches to login.
曾经蜡笔没有小新2017-05-15 17:11:32
The common practice now is that the front-end sends the username and password to the backend through the API. As for whether to stay logged in, the backend sets the cookie, and the frontend does not need to do anything
天蓬老师2017-05-15 17:11:32
Storage login status through localStorange, but there is no security at all
伊谢尔伦2017-05-15 17:11:32
The login status is stored in the cookie by the backend. You don't have to think about it.
PHP中文网2017-05-15 17:11:32
Just let the background set cookies.
After setting the cookie in the background, the header will be automatically brought over when the front end makes a request.
Then agree on a status code. When the request returns a specific status code, it will jump to the login page.
phpcn_u15822017-05-15 17:11:32
No matter what the situation, the front end does not know who the user is or whether the user is logged in. So who knows? rear end!
So, you only need to give the login status information that the backend gives you every time and let the backend verify it.
1. You can store it in a cookie and send it out every time you request it. Of course, this can be transparent to you, let the backend plant cookies, and set it to http only.
2. Because it is a single page, it can also be stored in a global variable in the memory. If not, it will not be logged in.
3. You can cache the token yourself and bring it manually every time you send a request.
某草草2017-05-15 17:11:32
It depends on how your backend supports it. Both token and cookie methods are acceptable
我想大声告诉你2017-05-15 17:11:32
loopback+vue+vue-resource, front-end and back-end separation templates, vue page paging function, authenticate permission control, accesstoken mechanism, credentials, CI, docker
https://github.com/qxl1231/ge...
Just look at my project example to find out. The complete solution