当前位置：首页 > VUE

vue实现登录检验

2026-03-07 21:24:31VUE

Vue 登录验证实现方案

基于路由守卫的全局验证

在 Vue 项目中可以通过路由守卫实现全局登录状态验证。在路由配置文件中添加 beforeEach 钩子：

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

为需要验证的路由添加 meta 标记：

vue实现登录检验

{
  path: '/dashboard',
  component: Dashboard,
  meta: { requiresAuth: true }
}

登录状态管理

使用 Vuex 集中管理登录状态：

// store/auth.js
const state = {
  user: null,
  token: null
}

const mutations = {
  SET_USER(state, user) {
    state.user = user
  },
  SET_TOKEN(state, token) {
    state.token = token
  }
}

const actions = {
  login({ commit }, credentials) {
    return axios.post('/api/login', credentials)
      .then(response => {
        commit('SET_USER', response.data.user)
        commit('SET_TOKEN', response.data.token)
        localStorage.setItem('token', response.data.token)
      })
  }
}

请求拦截器

在 axios 请求拦截器中自动添加认证头信息：

vue实现登录检验

// utils/axios.js
axios.interceptors.request.use(config => {
  const token = localStorage.getItem('token')
  if (token) {
    config.headers.Authorization = `Bearer ${token}`
  }
  return config
}, error => {
  return Promise.reject(error)
})

响应拦截器处理认证失效

axios.interceptors.response.use(response => response, error => {
  if (error.response.status === 401) {
    store.dispatch('logout')
    router.push('/login')
  }
  return Promise.reject(error)
})

登录组件示例

<template>
  <form @submit.prevent="handleSubmit">
    <input v-model="form.username" type="text">
    <input v-model="form.password" type="password">
    <button type="submit">登录</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: '',
        password: ''
      }
    }
  },
  methods: {
    async handleSubmit() {
      try {
        await this.$store.dispatch('auth/login', this.form)
        this.$router.push('/dashboard')
      } catch (error) {
        alert('登录失败')
      }
    }
  }
}
</script>

本地存储安全考虑

对于敏感信息，建议：

使用 HttpOnly 的 Cookie 替代 localStorage
考虑使用加密存储方案
设置合理的 token 过期时间
实现 refresh token 机制

服务端验证配合

前端验证不能替代服务端验证，必须确保所有敏感接口都有服务端验证：

// 后端中间件示例
function authMiddleware(req, res, next) {
  const token = req.headers.authorization?.split(' ')[1]
  if (!token) return res.status(401).send()

  try {
    const decoded = jwt.verify(token, SECRET_KEY)
    req.user = decoded
    next()
  } catch (err) {
    return res.status(401).send()
  }
}

这种实现方案结合了前端路由守卫、状态管理、HTTP 拦截器和服务端验证，提供了完整的登录验证流程。

标签: vue