Vue中设置登录验证拦截功能的思路详解

2023年6月11日上午10:28 • JavaScript

下面我将详细介绍“Vue中设置登录验证拦截功能的思路详解”的完整攻略。

1. 登录验证拦截的基本原理

在Vue项目中实现登录验证拦截的基本原理是使用Vue Router的导航守卫（Navigation Guards）功能。导航守卫可以用来在路由变化前获取用户信息，进行权限控制，从而实现路由的拦截。导航守卫有三种类型：全局导航、路由独享守卫和组件内的守卫。

在Vue项目中，我们可以在全局导航守卫中对登录状态进行判断，如果用户未登录则跳转到登录页面，如果用户已经登录则可以通过验证进入到指定页面。

2. 实现登录验证拦截的步骤

实现登录验证拦截的步骤可以分为以下几个部分：

2.1 创建路由实例

在Vue项目中，我们需要首先创建路由实例。可以使用Vue Router来实现路由功能，该插件已经被集成到Vue CLI中，我们只需要在main.js中导入它，并在Vue实例中使用它即可。

// main.js文件中
import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

new Vue({
  router, // 引入路由实例
  render: h => h(App),
}).$mount('#app')

2.2 配置路由

在配置路由时，我们需要注意需要拦截的路由，根据需求添加相应的导航守卫。

// router.js文件中
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

// 需要进行登录验证的路由
const requireAuth = (to, from, next) => {
  const isAuthenticated = localStorage.getItem('isAuthenticated') // 获取登录状态
  if (isAuthenticated) {
    next()
  } else {
    next('/login')
  }
}

const router = new VueRouter({
  routes: [
    // 普通路由
    {
      path: '/',
      name: 'Home',
      component: () => import('@/views/Home.vue')
    },
    // 需要进行登录验证的路由
    {
      path: '/admin',
      name: 'Admin',
      component: () => import('@/views/Admin.vue'),
      meta: { requireAuth } // 配置导航守卫
    },
    {
      path: '/login',
      name: 'Login',
      component: () => import('@/views/Login.vue')
    }
  ]
})

export default router

2.3 编写导航守卫

在Vue Router中，导航守卫使用beforeEach()方法进行统一管理。这个方法会在路由变化前触发，并在其中进行登录状态的判断。

// router.js文件中
router.beforeEach((to, from, next) => {
  const isAuthenticated = localStorage.getItem('isAuthenticated') // 获取登录状态
  if (to.matched.some(route => route.meta.requireAuth)) { // 判断该路由是否需要登录权限
    if (isAuthenticated) { // 判断登录状态
      next()
    } else {
      next({
        path: '/login',
        query: { redirect: to.fullPath } // 将跳转的路由path作为参数，登录成功后跳转到该路由
      })
    }
  } else {
    next()
  }
})

2.4 编写登录页面

我们需要编写一个登录页面，当用户输入账号和密码后可以调用后端API进行登录验证，如果验证通过，则在localStorage中设置登录状态，再跳转到指定页面。

// Login.vue文件中
<template>
  <div>
    <input type="text" v-model="username" />
    <input type="password" v-model="password" />
    <button @click="login">登录</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    login() {
      // 通过后端API验证账号密码是否正确
      axios.post('/api/login', {
        username: this.username,
        password: this.password
      })
      .then(response => {
        localStorage.setItem('isAuthenticated', true) // 设置登录状态
        let redirect = this.$route.query.redirect || '/admin'
        this.$router.push(redirect)
      })
      .catch(error => {
        console.log(error)
      })
    }
  }
}
</script>