preface

I personally understand that single sign-on is mainly to achieve the use of a single user and multiple platforms, as well as to increase the security of users. Use React+ DVA to implement single sign-on (SSO) for operation and maintenance.

When encapsulating network requests, single sign-on (SSO) should be followed, and interfaces with reserved request interception should be used uniformly. So the basic idea is: using AXIos HTTP interceptor to intercept request and response, combined with routing, to achieve login, interception, logout.

Routing to intercept

First of all, a customized requireAuth field should be added when defining the route, which is used to determine whether the access of the route requires login. If the user has logged in, the route is successfully entered; otherwise, the login page is displayed.

After defining a route, use the hook function provided by vue-router to determine the route beforeEach() :

Ps: Since the completed login in the project I wrote is popup by a modal window, it is not suitable for routing, so it is commented out here. However, if the login page is redirected, it is better to use this method.

Each hook method takes three arguments:

To: Route: indicates the destination Route to be entered

From: Route: indicates the Route that the current navigation is about to leave

Next: Function: Be sure to call this method to resolve the hook. The execution depends on the call parameters of the next method.

Next (): Goes to the next hook in the pipe. If all hooks are executed, the navigation state is confirmed.

Next (false): interrupts current navigation. If the browser URL changes (either manually by the user or by the browser back button), the URL is reset to the address corresponding to the FROM route.

Next (‘/’) or next({path: ‘/’}): jumps to a different address. The current navigation is interrupted and a new navigation is performed.

Make sure you call the next method or the hook won’t be resolved.

(blog.csdn.net/qq_36850813…)

To.meta is our custom data, including the requireAuth field we just defined. Use this field to determine whether the route requires login permission. If the application does not have a token, the login page is displayed for login. After the login succeeds, the system switches to the target route.

Does login interception end here? Don’t. This approach is simple front-end routing control and does not really prevent users from accessing routes that require login permission. There is also a case where the current token is invalid on the server, but the token is still stored locally and not updated in time. When you access the route that requires login permission, you should actually let the user log in again and get the latest valid token, so as to access the interface and obtain data normally. In this case, we need to combine the HTTP status code returned by the HTTP interceptor and the back-end interface to judge.

The interceptor

Due to the agreement with the background, if the background login status times out, the error code 405 will be returned in the response result, and THEN I will try to log in again after parsing.

In the figure above, vuEX is useful because the login design is a pop-up frame, which is not suitable for routing. Therefore, the login display and hiding can be controlled by changing the pop-up state value. If the route jumps to the login page, use the route to jump to the login page. Here is the best to login page jump to add redirected address, login back to the last open page.

The next step is to re-log in according to the login page.