vue中登陆实现逻辑

Vue 中登录实现逻辑

用户输入验证

在登录表单中，通常需要验证用户输入的邮箱/用户名和密码是否符合要求。可以使用 Vue 的表单验证库如 VeeValidate 或手动验证。

data() {
  return {
    form: {
      username: '',
      password: ''
    },
    errors: {
      username: false,
      password: false
    }
  }
},
methods: {
  validateForm() {
    this.errors.username = !this.form.username
    this.errors.password = !this.form.password
    return !this.errors.username && !this.errors.password
  }
}

发送登录请求

通过 axios 或其他 HTTP 客户端向后端 API 发送登录请求，通常使用 POST 方法传递用户凭证。

methods: {
  async login() {
    if (!this.validateForm()) return

    try {
      const response = await axios.post('/api/auth/login', {
        username: this.form.username,
        password: this.form.password
      })
      this.handleLoginSuccess(response.data)
    } catch (error) {
      this.handleLoginError(error)
    }
  }
}

处理登录响应

成功登录后，后端通常会返回 token 和用户信息，需要在前端进行存储和管理。

methods: {
  handleLoginSuccess(data) {
    localStorage.setItem('authToken', data.token)
    this.$store.commit('setUser', data.user)
    this.$router.push('/dashboard')
  },
  handleLoginError(error) {
    if (error.response.status === 401) {
      this.errorMessage = 'Invalid credentials'
    } else {
      this.errorMessage = 'Login failed, please try again'
    }
  }
}

状态管理

使用 Vuex 管理用户登录状态，便于全局访问和响应式更新。

// store.js
state: {
  user: null,
  isAuthenticated: false
},
mutations: {
  setUser(state, user) {
    state.user = user
    state.isAuthenticated = !!user
  },
  clearUser(state) {
    state.user = null
    state.isAuthenticated = false
  }
}

路由守卫

实现路由守卫，保护需要认证的路由，防止未登录用户访问。

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

持久化登录状态

通过检查本地存储的 token 来实现页面刷新后保持登录状态。

created() {
  const token = localStorage.getItem('authToken')
  if (token) {
    this.validateToken(token)
  }
},
methods: {
  async validateToken(token) {
    try {
      const response = await axios.get('/api/auth/validate', {
        headers: { Authorization: `Bearer ${token}` }
      })
      this.$store.commit('setUser', response.data.user)
    } catch {
      localStorage.removeItem('authToken')
    }
  }
}

注销功能

实现用户注销功能，清除本地存储和状态管理中的用户信息。

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

以上实现涵盖了 Vue 中登录功能的主要逻辑模块，可以根据具体项目需求进行调整和扩展。