vue 实现登录退出

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>

状态管理

使用 Vuex 管理用户登录状态，存储 token 和用户信息。

// store/index.js
export default new Vuex.Store({
  state: {
    token: localStorage.getItem('token') || null,
    user: null
  },
  mutations: {
    setToken(state, token) {
      state.token = token
      localStorage.setItem('token', token)
    },
    clearToken(state) {
      state.token = null
      localStorage.removeItem('token')
    },
    setUser(state, user) {
      state.user = user
    }
  },
  actions: {
    async login({ commit }, credentials) {
      const response = await axios.post('/api/login', credentials)
      commit('setToken', response.data.token)
      commit('setUser', response.data.user)
    }
  }
})

路由守卫

配置全局前置守卫，保护需要认证的路由。

// router/index.js
router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    if (!store.state.token) {
      next({ path: '/login' })
    } else {
      next()
    }
  } else {
    next()
  }
})

退出功能实现

创建退出按钮组件，调用 Vuex action 清除 token。

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

<script>
export default {
  methods: {
    handleLogout() {
      this.$store.dispatch('logout')
      this.$router.push('/login')
    }
  }
}
</script>

在 Vuex store 中添加 logout action：

actions: {
  logout({ commit }) {
    commit('clearToken')
    commit('setUser', null)
  }
}

API 拦截器

配置 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)
})

响应拦截器

处理 token 过期等情况。

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

用户信息获取

在应用初始化时获取用户信息。

created() {
  if (this.$store.state.token) {
    this.$store.dispatch('fetchUser')
  }
}

在 Vuex actions 中添加：

async fetchUser({ commit }) {
  try {
    const response = await axios.get('/api/user')
    commit('setUser', response.data)
  } catch (error) {
    commit('clearToken')
  }
}

登录状态显示

在导航栏显示登录状态。

<template>
  <div>
    <span v-if="$store.state.user">欢迎, {{ $store.state.user.name }}</span>
    <button v-if="$store.state.user" @click="handleLogout">退出</button>
  </div>
</template>