preface

The login module is basically available in every system, and the project has just been completed, so the login module process and problems encountered in the project are sorted out and solved.

Technology stack

The project applies the default hash mode to a single page and adopts vUE + VUe-Router + VUex + AXIos for functional development

Intercept ideas

Vue-router and AXIOS are used to intercept front-end login permission. Interception is mainly used for routing and initiating HTTP requests

Routing to intercept

When defining a route, use the meta field in the route configuration and add the requireAuth field to determine whether a route requires login judgment

const router = new VueRouter({
  routes: [{path: '/foo'.component: Foo,
      children: [{path: 'bar'.component: Bar,
          // a meta field
          meta: { requireAuth: true}}]}})Copy the code

Register a global front-guard on vue-router using router.beforeEach to check the meta information field in the navigational guard

const router = new VueRouter(RouterConfig);

// Register global hooks to intercept navigation
router.beforeEach((to, from, next) = > {
    // Interrupts the current cancel request while switching routes
    // http.ancelAjax();


    let token = Cookies.get('TXKSID');// The backend colleagues in the project use cookies to set the login state
    if (to.meta.requiresAuth) {// Determine whether the route requires login permission
        if (token) {// Determine whether the login has expirednext(); }}else {// If the login fails, the login status is cleared and the login page is displayed. Set path as a parameter to switch to this route after the login succeeds
            store.dispatch('accountStore/clearLogin');
            next({
                path: '/login'.query: {redirect: to.fullPath}
            })
        }
    } else {
        next()
    }
});

Copy the code

Request interceptor

The project is wrapped in the AXIOS library so that requests and responses can be handled uniformly

// Since cookies are used in the project, the browser automatically carries them on every request, so no additional Settings are required
//const TOKEN = Cookies.get('token');
//axios.defaults.headers.common['Authorization'] = TOKEN;

axios.interceptors.request.use(config= > {
	return config
}, error => {
	return Promise.reject(error)
});

axios.interceptors.response.use(res= > {
	return checkStatus(res);// Perform different operations based on the returned status
}, error => {
	if (error.response) {
		switch (error.response.status) {
			case 500:// The project default interface 500 is not authorized by the user
				// 500 Clear the login information and go to the login page
				store.dispatch('accountStore/clearLogin');
				// Redirects only when the current route is not on the login pagerouter.currentRoute.path ! = ='/login' &&
				router.replace({
					path: '/login'.query: { redirect: router.currentRoute.path },
                })
            case 403:
                return error.response
		}
	}
	return Promise.resolve(error.res)
});
Copy the code

Tips: When the user login expires, when the page is refreshed, if there are multiple request interfaces on the current page, the interceptor will jump to the login page multiple times, which will affect the route redirect after login. Therefore, you need to determine when jumping to login.

The login

On the login page, you only need to collect the user account and password, request the interface to log in, store the user information to vuex and localStorage, and set the login status.

this.toLogin(loginBody).then((res) = > {
    if (res.code === '0000') {// The request succeeded
        let redirectUrl = this.$route.query.redirect || this.index;
        	this.$router.push({
        		path: redirectUrl
        	});
        });
    } else {
        this.$toast(res.data || res.message)
    }
});
Copy the code

Through routing and request interception, login interception can be implemented at the front end. Request the back-end logout interface when logging out, and clear the login information. At this point, the login module is complete, any comments and suggestions are welcome.