Basic steps and sample code for implementing the function of not logged in to block pages

Preface

Implementing the unlogged page blocking function in Vue 2, it can usually be done through route guards and global front guards. Here is a basic implementation step and sample code to help you create a simple unlogged in intercept logic.

Step 1: Install and configure routing

First, make sure your Vue project has vue-router installed and configured. If it has not been installed, you can install it through the following command:

npm install vue-router

Then in yourConfigure routing in the file:

import VueRouter from 'vue-router'
 
(VueRouter)

Step 2: Create a Certification Guard

Next, you need to create a authentication guard that checks whether the user is already logged in. This can be created in the router by creating aFile to implement:

export default {
  isAuthenticated() {
    // Here you should check whether the user is logged in according to your application logic    // For example, check whether there is a token in local storage (localStorage)    return ('userToken') !== null;
  },
 
  redirectIfNotAuthenticated(to, from, next) {
    if (!()) {
       !== '/login' && (record => ) ? next({ path: '/login' }) : next()
    } else {
      next()
    }
  }
}

Step 3: Use the Router Guard

Now you can use this authentication guard in your routing configuration. ReviseThe routing configuration in the file adds a global pre-guard for the routes that need to be authenticated:

// ...Other codesconst routes = [
  { path: '/login', 
    component: Login 
  },
  { path: '/dashboard', 
    component: Dashboard,
    meta: 
       {requiresAuth: true} 
   } // Tag the routes that need to be verified]
 
const router = new VueRouter({
  mode: 'history',
  base: .BASE_URL,
  routes
})
 
((to, from, next) => {
  const auth = require('@/router/auth').default // Introduce certification guards  (to, from, next)
})
 
// ...Other codes

Step 4: Process the login logic

In your login componentIn, process user login logic and store authentication information (such as token) in the local storage after login is successful:

// 
 
export default {
  methods: {
    login() {
      // ...Log in logic      // Assume that after login is successful, the server returns a token      const token = 'your-token-from-server'
      ('userToken', token)
      // Redirect to the homepage or other routes that require authentication      this.$('/dashboard')
    }
  }
}

Step 5: Process logout logic

Finally, you need to provide a way to handle user logout. This usually involves clearing authentication information from local storage and redirecting to the login page:

methods: {
  // ...Other methods  logout() {
    ('userToken')
    this.$('/login')
  }
}

Through the above steps, you can implement a basic unlogged-in blocking page function in the Vue 2 project. When a user attempts to access a route that requires authentication without logging in, he will be redirected to the login page. After successful login, the user can access the pages he had tried to access or other pages that needed authentication normally.

At the same time, users can also actively log out and clear the authentication information.

This is the article about the basic steps and sample code for Vue2 to implement the function of blocking page without login. For more related content of the Vue2 blocking page without login, please search for my previous article or continue browsing the related articles below. I hope everyone will support me in the future!