vue实现线上登录

实现线上登录的基本流程

使用 Vue 实现线上登录功能通常涉及前端界面构建、表单验证、API 请求处理和状态管理。以下是关键步骤和代码示例。

创建登录表单组件

构建一个包含用户名和密码输入框的登录表单组件，使用 v-model 实现双向数据绑定。

<template>
  <div class="login-form">
    <h3>用户登录</h3>
    <form @submit.prevent="handleLogin">
      <div class="form-group">
        <label>用户名</label>
        <input type="text" v-model="username" required />
      </div>
      <div class="form-group">
        <label>密码</label>
        <input type="password" v-model="password" required />
      </div>
      <button type="submit">登录</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    handleLogin() {
      // 登录逻辑
    }
  }
}
</script>

添加表单验证

使用 Vue 的 computed 属性或第三方库（如 Vuelidate）对输入进行验证。

computed: {
  isFormValid() {
    return this.username.trim() !== '' && this.password.trim() !== ''
  }
}

调用登录 API

通过 Axios 发送登录请求到后端 API，并处理响应。

methods: {
  async handleLogin() {
    if (!this.isFormValid) return

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

管理用户状态

使用 Vuex 集中管理用户登录状态。

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

添加路由守卫

使用 Vue Router 的路由守卫保护需要认证的路由。

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

处理 token 过期

在 Axios 拦截器中检查 token 有效性并刷新或重定向。

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

实现退出功能

清除本地存储和 Vuex 状态。

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

安全注意事项

• 使用 HTTPS 加密通信
• 避免在客户端存储敏感信息
• 实现 CSRF 保护
• 设置合理的 token 过期时间
• 对密码进行哈希处理（后端）

以上步骤提供了 Vue 实现线上登录功能的基本框架，可根据具体需求进行调整和扩展。