当前位置：首页 > VUE

vue怎样实现认证登录

2026-02-24 04:53:45VUE

Vue 实现认证登录的方法

使用 Vue Router 和状态管理

Vue 应用中实现认证登录通常需要结合 Vue Router 和状态管理工具（如 Vuex 或 Pinia）。以下是一个基本实现流程：

安装必要的依赖：

npm install vue-router pinia

创建路由文件并配置认证守卫：

import { createRouter, createWebHistory } from 'vue-router'
import { useAuthStore } from '@/stores/auth'

const routes = [
  {
    path: '/login',
    name: 'Login',
    component: () => import('@/views/Login.vue')
  },
  {
    path: '/dashboard',
    name: 'Dashboard',
    component: () => import('@/views/Dashboard.vue'),
    meta: { requiresAuth: true }
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

router.beforeEach((to, from, next) => {
  const authStore = useAuthStore()
  if (to.meta.requiresAuth && !authStore.isAuthenticated) {
    next('/login')
  } else {
    next()
  }
})

export default router

创建认证存储

使用 Pinia 创建认证状态管理：

vue怎样实现认证登录

import { defineStore } from 'pinia'

export const useAuthStore = defineStore('auth', {
  state: () => ({
    user: null,
    token: null
  }),
  actions: {
    login(credentials) {
      return axios.post('/api/login', credentials)
        .then(response => {
          this.user = response.data.user
          this.token = response.data.token
          localStorage.setItem('token', response.data.token)
        })
    },
    logout() {
      this.user = null
      this.token = null
      localStorage.removeItem('token')
    }
  },
  getters: {
    isAuthenticated: (state) => !!state.token
  }
})

实现登录组件

创建登录表单组件：

<template>
  <form @submit.prevent="handleLogin">
    <input v-model="form.email" type="email" placeholder="Email">
    <input v-model="form.password" type="password" placeholder="Password">
    <button type="submit">Login</button>
  </form>
</template>

<script setup>
import { ref } from 'vue'
import { useAuthStore } from '@/stores/auth'
import { useRouter } from 'vue-router'

const authStore = useAuthStore()
const router = useRouter()
const form = ref({
  email: '',
  password: ''
})

const handleLogin = async () => {
  try {
    await authStore.login(form.value)
    router.push('/dashboard')
  } catch (error) {
    console.error(error)
  }
}
</script>

处理 API 请求拦截

在 axios 实例中添加请求拦截器：

import axios from 'axios'

const api = axios.create({
  baseURL: 'http://your-api.com'
})

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

export default api

保护路由和组件

在需要认证的路由或组件中检查认证状态：

vue怎样实现认证登录

<template>
  <div v-if="authStore.isAuthenticated">
    <!-- 受保护的内容 -->
  </div>
  <div v-else>
    <p>请先登录</p>
  </div>
</template>

<script setup>
import { useAuthStore } from '@/stores/auth'
const authStore = useAuthStore()
</script>

处理令牌刷新

实现令牌刷新逻辑以延长会话：

// 在 auth store 中添加
refreshToken() {
  return axios.post('/api/refresh', { token: this.token })
    .then(response => {
      this.token = response.data.token
      localStorage.setItem('token', response.data.token)
    })
}

// 响应拦截器中处理 401 错误
api.interceptors.response.use(
  response => response,
  async error => {
    if (error.response.status === 401) {
      const authStore = useAuthStore()
      try {
        await authStore.refreshToken()
        return api.request(error.config)
      } catch {
        authStore.logout()
        router.push('/login')
      }
    }
    return Promise.reject(error)
  }
)

实现社交登录

集成第三方登录（如 Google OAuth）：

// 在 auth store 中添加
googleLogin() {
  window.location.href = 'https://your-api.com/auth/google'
}

// 处理回调
handleOAuthCallback() {
  const urlParams = new URLSearchParams(window.location.search)
  const token = urlParams.get('token')
  if (token) {
    this.token = token
    localStorage.setItem('token', token)
    router.push('/dashboard')
  }
}

实现双因素认证

添加 2FA 验证步骤：

// 在 auth store 中添加
verify2FA(code) {
  return axios.post('/api/verify-2fa', { code, token: this.token })
    .then(response => {
      this.user = response.data.user
      return response
    })
}