Shulou(Shulou.com)05/31 Report--

This article focuses on "how to use vue-resource requests to intercept http login". Interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to intercept http login using vue-resource requests.

Routing file

Export default [{name: 'root', path:', component: function (resolve) {require (['your vue file path address'], resolve);}, children: [{name: 'applicationLayout', path:' / app/applicationLayout/:appId', component: function (resolve) {require (['your vue file path address'], resolve) }, meta: {requireAuth: true, / / you can add a meta attribute to the page that you need to log in to}}]]

Add the following code to the main.js entry file

Const UNAUTHORIZED_CODE = 401 store.dispatch router.beforeEach ((to, from, next) = > {if (to.meta.requireAuth) {if (storage.get ('platformUser')) {store.dispatch (' loginUser', JSON.parse (storage.get ('platformUser'); / / store user information in vuex for global use next ();} else {store.dispatch (' initLoginModal', {state: true}); / / display login pop-up window next () }} else {next ();}}); / / intercept the 401 status code returned in the http request and display the login pop-up window Vue.http.interceptors.push ((request, next) = > {next ((response) = > {if (response.body.status = UNAUTHORIZED_CODE) {/ / the return code store.dispatch ('initLoginModal', {state: true}) with the backend agreement that the login fails) / / display the login pop-up window store.dispatch ('removeUser'); / / remove the user information stored in the browser} return response;});}). At this point, I believe you have a better understanding of "how to use vue-resource requests to intercept http login". You might as well do it! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.