当前位置：首页 > VUE

vue实现登录登出

2026-02-17 07:22:12VUE

Vue 实现登录登出功能

登录功能实现

创建登录表单组件，包含用户名和密码输入框以及提交按钮。使用 v-model 绑定表单数据。

<template>
  <form @submit.prevent="handleLogin">
    <input v-model="username" type="text" placeholder="用户名">
    <input v-model="password" type="password" placeholder="密码">
    <button type="submit">登录</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    async handleLogin() {
      try {
        const response = await axios.post('/api/login', {
          username: this.username,
          password: this.password
        })
        localStorage.setItem('token', response.data.token)
        this.$router.push('/dashboard')
      } catch (error) {
        console.error('登录失败:', error)
      }
    }
  }
}
</script>

路由守卫设置

在路由配置中添加导航守卫，保护需要认证的路由。

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

登出功能实现

创建登出按钮组件，清除本地存储的 token 并重定向到登录页。

<template>
  <button @click="handleLogout">登出</button>
</template>

<script>
export default {
  methods: {
    handleLogout() {
      localStorage.removeItem('token')
      this.$router.push('/login')
    }
  }
}
</script>

状态管理

对于复杂应用，建议使用 Vuex 管理认证状态。

const store = new Vuex.Store({
  state: {
    token: localStorage.getItem('token') || null
  },
  mutations: {
    setToken(state, token) {
      state.token = token
      localStorage.setItem('token', token)
    },
    clearToken(state) {
      state.token = null
      localStorage.removeItem('token')
    }
  },
  actions: {
    login({ commit }, credentials) {
      return axios.post('/api/login', credentials)
        .then(response => {
          commit('setToken', response.data.token)
        })
    },
    logout({ commit }) {
      commit('clearToken')
    }
  }
})

全局拦截器

设置 axios 拦截器自动添加认证 token 到请求头。

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 => {
  return response
}, error => {
  if (error.response.status === 401) {
    localStorage.removeItem('token')
    router.push('/login')
  }
  return Promise.reject(error)
})

用户信息获取

登录后获取用户信息并存储在 Vuex 中。

actions: {
  fetchUser({ commit }) {
    return axios.get('/api/user')
      .then(response => {
        commit('setUser', response.data)
      })
  }
}

vue实现登录登出