当前位置：首页 > VUE

vue实现登录检验

2026-01-14 04:49:23VUE

Vue 实现登录检验的方法

路由守卫验证登录状态

在 Vue 项目中，可以通过路由守卫（Navigation Guards）来实现登录验证。在 router/index.js 中设置全局前置守卫，检查用户是否已登录。

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

在路由配置中为需要登录的页面添加 meta 字段：

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

使用 Vuex 管理登录状态

通过 Vuex 集中管理用户登录状态，可以更方便地在组件中访问和修改登录状态。

vue实现登录检验

// store/index.js
export default new Vuex.Store({
  state: {
    isLoggedIn: false,
    user: null
  },
  mutations: {
    login(state, user) {
      state.isLoggedIn = true
      state.user = user
    },
    logout(state) {
      state.isLoggedIn = false
      state.user = null
    }
  }
})

拦截 HTTP 请求添加认证信息

使用 axios 拦截器为每个请求自动添加认证 token：

// utils/http.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)
})

处理 token 过期

在响应拦截器中检查 token 是否过期，如果过期则跳转到登录页面：

vue实现登录检验

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

登录组件实现

在登录组件中处理用户登录逻辑：

methods: {
  async handleLogin() {
    try {
      const response = await login(this.loginForm)
      localStorage.setItem('token', response.data.token)
      this.$store.commit('login', response.data.user)
      this.$router.push('/dashboard')
    } catch (error) {
      console.error('Login failed:', error)
    }
  }
}

退出登录实现

在需要退出登录的地方调用 logout 方法：

methods: {
  logout() {
    localStorage.removeItem('token')
    this.$store.commit('logout')
    this.$router.push('/login')
  }
}

组合式 API 实现

如果使用 Vue 3 的组合式 API，可以封装一个 useAuth 组合函数：

// composables/useAuth.js
import { computed } from 'vue'
import { useStore } from 'vuex'

export function useAuth() {
  const store = useStore()

  const isLoggedIn = computed(() => store.state.isLoggedIn)

  const login = (user) => {
    store.commit('login', user)
  }

  const logout = () => {
    store.commit('logout')
  }

  return { isLoggedIn, login, logout }
}

这些方法可以组合使用，根据项目需求选择合适的实现方式。路由守卫适合页面级别的访问控制，Vuex 适合全局状态管理，axios 拦截器适合 API 请求的认证处理。

标签: vue