vue 实现登录验证

Vue 实现登录验证的方法

使用 Vue Router 进行路由守卫

在 Vue 项目中，可以通过 Vue Router 的导航守卫（beforeEach）实现登录验证。未登录用户访问受保护路由时，会被重定向到登录页面。

// router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/views/Login.vue'
import Home from '@/views/Home.vue'

Vue.use(Router)

const router = new Router({
  routes: [
    { path: '/login', component: Login },
    { path: '/home', component: Home, meta: { requiresAuth: true } }
  ]
})

router.beforeEach((to, from, next) => {
  const isAuthenticated = localStorage.getItem('token')
  if (to.matched.some(record => record.meta.requiresAuth) && !isAuthenticated) {
    next('/login')
  } else {
    next()
  }
})

export default router

表单验证与 API 请求

在登录页面组件中，实现表单验证并发送登录请求。成功登录后存储 token 并跳转。

// views/Login.vue
<template>
  <form @submit.prevent="handleLogin">
    <input v-model="form.username" type="text" placeholder="Username">
    <input v-model="form.password" type="password" placeholder="Password">
    <button type="submit">Login</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: '',
        password: ''
      }
    }
  },
  methods: {
    async handleLogin() {
      try {
        const response = await axios.post('/api/login', this.form)
        localStorage.setItem('token', response.data.token)
        this.$router.push('/home')
      } catch (error) {
        alert('Login failed')
      }
    }
  }
}
</script>

使用 Vuex 管理登录状态

对于更复杂的应用，可以使用 Vuex 集中管理登录状态和用户信息。

// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    token: null,
    user: null
  },
  mutations: {
    setToken(state, token) {
      state.token = token
    },
    setUser(state, user) {
      state.user = user
    }
  },
  actions: {
    async login({ commit }, credentials) {
      const response = await axios.post('/api/login', credentials)
      commit('setToken', response.data.token)
      commit('setUser', response.data.user)
    }
  }
})

响应拦截处理 token 过期

在 axios 拦截器中处理 token 过期情况，自动跳转到登录页面。

// utils/axios.js
import axios from 'axios'

const instance = axios.create()

instance.interceptors.response.use(
  response => response,
  error => {
    if (error.response.status === 401) {
      localStorage.removeItem('token')
      window.location.href = '/login'
    }
    return Promise.reject(error)
  }
)

export default instance

组合式 API 实现

使用 Vue 3 的组合式 API 可以更灵活地实现登录验证逻辑。

// composables/useAuth.js
import { ref } from 'vue'
import { useRouter } from 'vue-router'

export function useAuth() {
  const router = useRouter()
  const isAuthenticated = ref(!!localStorage.getItem('token'))

  const login = async (credentials) => {
    const response = await axios.post('/api/login', credentials)
    localStorage.setItem('token', response.data.token)
    isAuthenticated.value = true
    router.push('/')
  }

  const logout = () => {
    localStorage.removeItem('token')
    isAuthenticated.value = false
    router.push('/login')
  }

  return { isAuthenticated, login, logout }
}

这些方法涵盖了 Vue 中实现登录验证的主要技术点，可以根据项目需求选择合适的实现方式。路由守卫确保页面级保护，Vuex 提供状态管理，axios 拦截器处理全局认证逻辑，而组合式 API 则提供了更现代的代码组织方式。