当前位置：首页 > VUE

vue 实现登录验证

2026-03-07 18:22:10VUE

Vue 登录验证实现方案

使用 Vue Router 进行路由守卫

在 router/index.js 中配置全局前置守卫，检查用户是否已登录。未登录用户访问受限路由时重定向到登录页。

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

路由配置需添加元信息标记需要验证的路由：

vue 实现登录验证

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

登录表单与验证逻辑

创建登录组件处理用户凭证验证：

methods: {
  handleSubmit() {
    axios.post('/api/login', {
      username: this.username,
      password: this.password
    }).then(response => {
      localStorage.setItem('token', response.data.token)
      this.$router.push('/dashboard')
    }).catch(error => {
      console.error('Login failed', error)
    })
  }
}

状态管理集成

使用 Vuex 集中管理认证状态：

vue 实现登录验证

const store = new Vuex.Store({
  state: {
    user: null,
    token: null
  },
  mutations: {
    setUser(state, { user, token }) {
      state.user = user
      state.token = token
    },
    clearAuth(state) {
      state.user = null
      state.token = null
    }
  }
})

令牌刷新机制

实现 axios 拦截器处理令牌过期情况：

axios.interceptors.response.use(
  response => response,
  error => {
    if (error.response.status === 401) {
      return axios.post('/api/refresh')
        .then(res => {
          localStorage.setItem('token', res.data.token)
          error.config.headers['Authorization'] = 'Bearer ' + res.data.token
          return axios.request(error.config)
        })
    }
    return Promise.reject(error)
  }
)

安全注意事项

始终使用 HTTPS 传输凭证
存储令牌时优先考虑 HttpOnly cookies 而非 localStorage
实现 CSRF 防护机制
设置合理的令牌过期时间
密码字段应使用 type="password" 自动屏蔽输入

第三方认证集成

支持 OAuth2.0 的第三方登录方案：

methods: {
  loginWithGoogle() {
    window.location.href = 'https://accounts.google.com/o/oauth2/auth?' + 
      `client_id=${CLIENT_ID}&` +
      `redirect_uri=${REDIRECT_URI}&` +
      'response_type=code&' +
      'scope=email profile'
  }
}

标签: vue