How to use routing to implement login authentication and page jump logic in Vue?

How to use routing to implement login authentication and page jump logic in Vue?

Overview:
In Vue, routing (Vue Router) is a very important tool, which can help us jump and manage between pages. But in actual development, we often need to add login authentication function to ensure that users cannot access pages that require authorization when they are not logged in. This article will introduce how to use Vue Router to implement login authentication and page jump logic, and provide relevant code examples.

Step 1: Install and configure Vue Router
First, make sure your Vue project has Vue Router installed. If it is not installed, you can use the following command to install it:

npm install vue-router

After the installation is complete, import Vue Router in the entry file of the project (usually main.js) and use Vue.use () method to install it:

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

Then, create a new Vue Router instance and configure the routing table:

const router = new VueRouter({
  routes: [
    // 路由配置项
  ]
})

Step 2: Define the routing table
In the previous step we An empty routing table is created, now we need to define specific routing configuration items. In the routing table, we need to consider the pages that require authentication and the pages that do not require authentication, and configure them accordingly.

const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: Home
      meta: {
        requiresAuth: true // 需要鉴权的页面
      }
    },
    {
      path: '/login',
      component: Login
      meta: {
        requiresAuth: false // 不需要鉴权的页面
      }
    }
  ]
})

In the above code, we defined two routing configuration items, one is the homepage (/), which requires authentication; the other is the login page (/login), no authentication is required.

Step 3: Add login authentication logic
Now let’s add login authentication logic. First, we need to create a global login status (for example: isLogin) in Vue to indicate whether the user is logged in. In the Vue instance, we can use the computed attribute to define this state:

const app = new Vue({
  data() {
    return {
      isLogin: false // 默认未登录
    }
  },
  computed: {
    // 登录状态
    isAuthenticated() {
      return this.isLogin
    }
  }
}).$mount('#app')

Next, in the routing configuration item of each page that requires authentication, determine whether to allow access to the page by judging the login status . We can achieve this function with the help of Navigation Guards provided by Vue Router.

router.beforeEach((to, from, next) => {
  // 判断路由是否需要鉴权
  if (to.meta.requiresAuth) {
    // 如果没有登录，则跳转到登录页
    if (!app.isAuthenticated) {
      next('/login')
    } else {
      next()
    }
  } else {
    next()
  }
})

In the above code, we use the router.beforeEach() method to define a global front guard, and decide whether to Allow access to this page. If the user is not logged in and the route requires authentication, it will automatically jump to the login page; otherwise, continue to access the page.

Step 4: Page Jump Logic
On the basis of login authentication, we can also add page jump logic. For example, when a user successfully logs in, the user needs to be redirected to the home page. We can use the router.push() method to implement page jump after successful login.

methods: {
  login() {
    // 登录逻辑
    // ...

    // 登录成功后重定向到首页
    this.isLogin = true
    this.$router.push('/')
  }
}

In the above code, we set the login status to true in the login method, and use the $router.push() method to redirect the page to the homepage.

Conclusion:
Through the above steps, we can easily implement login authentication and page jump logic in the Vue project. By configuring the routing table and using navigation guards, we can restrict users from accessing pages that require authorization, and automatically jump to the login page when the user is not logged in. By setting the login status and using the $router.push() method, we can implement the page jump logic after successful login. I hope this article can help you better understand and use Vue Router.

The above is the detailed content of How to use routing to implement login authentication and page jump logic in Vue?. For more information, please follow other related articles on the PHP Chinese website!