当前位置：首页 > VUE

vue 实现登录验证

2026-01-08 04:37:00VUE

Vue 实现登录验证的方法

使用 Vue Router 进行路由守卫

在 Vue 项目中，可以通过 Vue Router 的路由守卫（Navigation Guards）实现登录验证。路由守卫可以在路由跳转前进行拦截，检查用户是否已登录。

// router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '../views/Login.vue'
import Dashboard from '../views/Dashboard.vue'

Vue.use(VueRouter)

const routes = [
  { path: '/login', component: Login },
  { path: '/dashboard', component: Dashboard, meta: { requiresAuth: true } }
]

const router = new VueRouter({
  routes
})

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

使用 Axios 拦截器验证请求

在发送 HTTP 请求时，可以通过 Axios 的拦截器自动添加认证信息（如 Token），并在响应拦截器中处理认证失败的情况。

vue 实现登录验证

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

const instance = axios.create({
  baseURL: 'https://api.example.com'
})

instance.interceptors.request.use(config => {
  const token = localStorage.getItem('token')
  if (token) {
    config.headers.Authorization = `Bearer ${token}`
  }
  return config
})

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

登录表单验证

在登录页面中，可以使用 Vue 的表单验证功能确保用户输入符合要求。

vue 实现登录验证

// src/views/Login.vue
<template>
  <form @submit.prevent="handleSubmit">
    <input v-model="email" type="email" placeholder="Email" required>
    <input v-model="password" type="password" placeholder="Password" required>
    <button type="submit">Login</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      email: '',
      password: ''
    }
  },
  methods: {
    async handleSubmit() {
      try {
        const response = await axios.post('/login', {
          email: this.email,
          password: this.password
        })
        localStorage.setItem('token', response.data.token)
        this.$router.push('/dashboard')
      } catch (error) {
        console.error('Login failed:', error)
      }
    }
  }
}
</script>

使用 Vuex 管理登录状态

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

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

Vue.use(Vuex)

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

在组件中使用登录状态

在需要验证登录状态的组件中，可以从 Vuex 获取用户信息或检查登录状态。

// src/views/Dashboard.vue
<template>
  <div v-if="isAuthenticated">
    Welcome, {{ user.name }}!
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState(['user', 'token']),
    isAuthenticated() {
      return !!this.token
    }
  }
}
</script>

通过以上方法，可以实现 Vue 项目的登录验证功能，确保只有已登录用户才能访问受保护的页面和资源。

标签: vue