当前位置：首页 > VUE

vue实现登录判断

2026-02-19 07:13:37VUE

Vue 实现登录判断

在 Vue 中实现登录判断通常涉及以下几个关键步骤：

使用 Vue Router 进行路由守卫

通过 Vue Router 的导航守卫（beforeEach）可以拦截路由跳转，检查用户是否已登录。若未登录，则重定向到登录页面。

// router/index.js
import router from './router'

router.beforeEach((to, from, next) => {
  const isAuthenticated = localStorage.getItem('token') // 检查本地存储的 token
  if (to.meta.requiresAuth && !isAuthenticated) {
    next('/login') // 跳转到登录页
  } else {
    next() // 放行
  }
})

登录状态管理

推荐使用 Vuex 集中管理登录状态，避免分散的逻辑判断。

// store/index.js
const store = new Vuex.Store({
  state: {
    isLoggedIn: false,
    user: null
  },
  mutations: {
    login(state, userData) {
      state.isLoggedIn = true
      state.user = userData
      localStorage.setItem('token', userData.token) // 存储 token
    },
    logout(state) {
      state.isLoggedIn = false
      state.user = null
      localStorage.removeItem('token') // 清除 token
    }
  }
})

登录逻辑实现

在登录组件中调用 Vuex 的登录方法，并处理接口返回的认证信息。

// Login.vue
methods: {
  async handleLogin() {
    try {
      const response = await axios.post('/api/login', {
        username: this.username,
        password: this.password
      })
      this.$store.commit('login', response.data) // 提交到 Vuex
      this.$router.push('/dashboard') // 跳转到主页
    } catch (error) {
      console.error('登录失败:', error)
    }
  }
}

全局状态检查

在根组件（如 App.vue）的 created 钩子中检查初始登录状态，避免页面刷新后状态丢失。

// App.vue
created() {
  const token = localStorage.getItem('token')
  if (token) {
    this.$store.commit('login', { token }) // 恢复登录状态
  }
}

动态显示登录相关 UI

根据登录状态动态显示导航栏内容，例如显示“登录”或“用户信息”。

<template>
  <div v-if="$store.state.isLoggedIn">
    <span>欢迎, {{ $store.state.user.name }}</span>
    <button @click="logout">退出</button>
  </div>
  <div v-else>
    <router-link to="/login">登录</router-link>
  </div>
</template>

接口请求拦截

在 Axios 拦截器中自动添加认证 Token，并在 Token 失效时跳转登录页。

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

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

vue实现登录判断