Vue2.x configures routing navigation guards to implement user login and exit

Preface

Previously, in the study of Vue, the function of the user login module was realized through the routing navigation guard control. Now when doing the project again, the routing navigation guard must be configured by Vue to realize the same function. Here, the implementation process is recorded and summarized (this article is implemented based on Vue2.x)

Tip: The following is the main content of this article. The following cases can be used for reference

1. Configure routing navigation guard

1. Global Navigation Guard

If there is only a backend in the project, you can configure the global navigation guard in Vue. After setting the global routing navigation guard, as long as the project is started, the user can only jump to the login page if he is not logged in, and is not allowed to jump to other interfaces .
Add the following code to the router -> index.js folder that is automatically generated when installing the vue-router dependency

router.beforeEach((to, from, next) => {
  // If the access is to the login interface, then allow it directly if (to.path === '/login') return next()
  //Get user page token information let token = window.sessionStorage.getItem('token')
  //If the token data is null, jump to the specified path if (!token) return next("/login")
  next()
})

Parameter explanation:

• to: Which interface to jump to
• from: which interface to jump from
• next: represents the next() function , which is used to release

2. Local navigation guard

There is also a situation in project development where both the front-end and the back-end need to be developed at the same time. At this time, the routing navigation guard cannot be configured globally, because the front-end interface needs to be displayed to users, and users can access it even if they are not logged in . Therefore, the routing navigation guard only intercepts the back-end path.

The route navigation guard is still configured in the index.js folder, but this time the configuration is for a single component.

For example, in my project, the Welcome component is a background component. Now to configure the routing navigation guard for this component, first replace the global configuration of beforeEach with beforeEnter for the configuration of the single component navigation guard.

The author previously configured the routing navigation guard in the login component, but it didn't work. I recorded it here to avoid making such a mistake in the future. Just add the following code to the component:

// Define route navigation guard beforeEnter(to, from, next) {
      //Get user page token information let token = window.sessionStorage.getItem('token')
      //If the token data is null, jump to the specified path if (!token) return next("/login")
      next()
    }

The parameters of the local navigation guard are consistent with those of the global configuration. Except for replacing beforeEach with beforeEnter , the rest are the same. I will not go into details here.

2. User Login

Only the front-end code is shown here. Everyone has their own style and way of writing the back-end code, so it will not be shown here.

1. axios configuration

In order to avoid the problem of callback hell in the project, I imported the axios plug-in here and configured axios in advance in the main.js file

/* Import axios package */
import axios from 'axios'

/* Set the request root directory of axios*/
axios.defaults.baseURL = 'http://localhost:8089/'
/* Add a global object to the vue object and then send an ajax request using the $http object*/
Vue.prototype.$http = axios

Because global configuration is performed in the main.js file, $http appears in the component to represent the set request root directory, which is http://localhost:8089/ here.

2. User login code

// When the login button is clicked, send data to the background login() {
  this.$refs.loginFormRef.validate(async valid => {
    if(!valid) return
    const {data: result} = await this.$http.post("/user/login",this.loginForm)
    // If the status code in the returned parameter is not 200, it means login failed if(result.status !== 200) return this.$message.error("User login failed")
    this.$message.success("User login successful")
    //After successful login, save the token information to the session window.sessionStorage.setItem('token',result.data)
    //Jump to the homepage of the backend management system this.$router.push("/welcome")
})

3. User Exit

When the user logs out, he only needs to delete the token data in the Session and then jump to other pages. At this time, the routing navigation guard will take effect again, so it can be implemented in the foreground without connecting to the backend .

1. Implementation code

logout() {
  //1. Delete the data in the session window.sessionStorage.clear()
  //2. User accesses the login page this.$router.push('/login')
}

Summarize

The above is the function of realizing user login and logout after configuring the routing navigation guard in Vue. There are two situations in the implementation, namely, the interface can only be accessed after logging in to the project and the front desk can be browsed even if the user is not logged in. For the first case, you only need to perform global configuration. For the second case, you only need to configure single-component routing navigation in the component to which you want to jump after login.

This is the end of this article about configuring Vue2.x routing navigation guards to implement user login and logout. For more relevant Vue routing guard login and logout content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!