vue实现会员登录

实现会员登录的基本流程

在Vue中实现会员登录功能通常需要结合前端界面、后端API以及状态管理。以下是一个典型的实现流程：

创建登录表单组件 使用Vue的单文件组件创建登录界面，包含用户名和密码输入框。表单应包含数据绑定和提交处理逻辑。

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

<script>
export default {
  data() {
    return {
      form: {
        username: '',
        password: ''
      }
    }
  },
  methods: {
    async handleSubmit() {
      try {
        const response = await this.$axios.post('/api/login', this.form)
        // 处理登录成功逻辑
      } catch (error) {
        // 处理错误
      }
    }
  }
}
</script>

配置Axios进行API请求

安装并配置axios用于与后端API通信。可以在main.js中全局配置axios实例。

import axios from 'axios'

const instance = axios.create({
  baseURL: 'https://your-api-domain.com/api',
  timeout: 5000
})

// 请求拦截器
instance.interceptors.request.use(config => {
  // 可在此添加token等请求头
  return config
})

// 响应拦截器
instance.interceptors.response.use(
  response => response.data,
  error => {
    // 统一处理错误
    return Promise.reject(error)
  }
)

Vue.prototype.$axios = instance

处理登录状态管理

使用Vuex管理用户登录状态和token信息。创建auth模块存储用户认证相关数据。

// store/modules/auth.js
const state = {
  token: localStorage.getItem('token') || '',
  userInfo: null
}

const mutations = {
  SET_TOKEN(state, token) {
    state.token = token
    localStorage.setItem('token', token)
  },
  SET_USER_INFO(state, userInfo) {
    state.userInfo = userInfo
  },
  CLEAR_AUTH(state) {
    state.token = ''
    state.userInfo = null
    localStorage.removeItem('token')
  }
}

const actions = {
  login({ commit }, { username, password }) {
    return axios.post('/login', { username, password })
      .then(response => {
        commit('SET_TOKEN', response.data.token)
        return response
      })
  },
  logout({ commit }) {
    commit('CLEAR_AUTH')
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}

实现路由守卫

配置路由守卫保护需要认证的页面，未登录用户访问时重定向到登录页。

// router/index.js
router.beforeEach((to, from, next) => {
  const isAuthenticated = store.state.auth.token
  const requiresAuth = to.matched.some(record => record.meta.requiresAuth)

  if (requiresAuth && !isAuthenticated) {
    next('/login')
  } else {
    next()
  }
})

添加表单验证

使用Vuelidate等库为登录表单添加验证规则，提升用户体验。

<template>
  <form @submit.prevent="handleSubmit">
    <input v-model="form.username" type="text" placeholder="用户名">
    <div v-if="$v.form.username.$error">用户名不能为空</div>

    <input v-model="form.password" type="password" placeholder="密码">
    <div v-if="$v.form.password.$error">密码不能为空</div>

    <button type="submit" :disabled="$v.$invalid">登录</button>
  </form>
</template>

<script>
import { required } from 'vuelidate/lib/validators'

export default {
  data() {
    return {
      form: {
        username: '',
        password: ''
      }
    }
  },
  validations: {
    form: {
      username: { required },
      password: { required }
    }
  },
  methods: {
    handleSubmit() {
      this.$v.$touch()
      if (!this.$v.$invalid) {
        // 提交表单
      }
    }
  }
}
</script>

实现记住登录功能

在登录时添加记住我选项，延长token有效期或使用refresh token机制。

// 登录action修改
login({ commit }, { username, password, rememberMe }) {
  return axios.post('/login', { username, password, rememberMe })
    .then(response => {
      commit('SET_TOKEN', response.data.token)
      if (rememberMe) {
        // 设置长期有效的cookie
      }
      return response
    })
}

处理token刷新

实现自动刷新token机制，避免用户频繁重新登录。

// axios响应拦截器添加token刷新逻辑
instance.interceptors.response.use(
  response => response.data,
  async error => {
    const originalRequest = error.config
    if (error.response.status === 401 && !originalRequest._retry) {
      originalRequest._retry = true
      try {
        const newToken = await refreshToken()
        store.commit('SET_TOKEN', newToken)
        originalRequest.headers.Authorization = `Bearer ${newToken}`
        return instance(originalRequest)
      } catch (refreshError) {
        store.dispatch('logout')
        return Promise.reject(refreshError)
      }
    }
    return Promise.reject(error)
  }
)