vue前端实现登录

Vue 前端登录实现方案

基础登录组件实现

创建登录表单组件，包含用户名和密码输入框

<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
        })
        // 处理登录成功逻辑
      } catch (error) {
        // 处理错误
      }
    }
  }
}
</script>

状态管理与Token存储

使用Vuex管理登录状态和用户信息

// store/auth.js
export default {
  state: {
    token: localStorage.getItem('token') || null,
    user: null
  },
  mutations: {
    SET_TOKEN(state, token) {
      state.token = token
      localStorage.setItem('token', token)
    },
    SET_USER(state, user) {
      state.user = user
    },
    CLEAR_AUTH(state) {
      state.token = null
      state.user = null
      localStorage.removeItem('token')
    }
  },
  actions: {
    login({ commit }, credentials) {
      return axios.post('/api/login', credentials)
        .then(response => {
          commit('SET_TOKEN', response.data.token)
          commit('SET_USER', response.data.user)
          return response
        })
    }
  }
}

路由守卫配置

配置全局路由守卫实现页面访问控制

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

  if (requiresAuth && !isAuthenticated) {
    next('/login')
  } else if (to.path === '/login' && isAuthenticated) {
    next('/')
  } else {
    next()
  }
})

Axios拦截器配置

设置请求拦截器自动添加Token

// utils/axios.js
axios.interceptors.request.use(config => {
  const token = store.state.auth.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.commit('CLEAR_AUTH')
    router.push('/login')
  }
  return Promise.reject(error)
})

登录后跳转处理

处理登录成功后的页面跳转

// Login.vue
methods: {
  async handleLogin() {
    try {
      await this.$store.dispatch('auth/login', {
        username: this.username,
        password: this.password
      })
      const redirect = this.$route.query.redirect || '/'
      this.$router.push(redirect)
    } catch (error) {
      this.error = '登录失败，请检查用户名和密码'
    }
  }
}

记住登录功能实现

添加记住我选项延长Token有效期

<template>
  <input v-model="rememberMe" type="checkbox"> 记住我
</template>

<script>
export default {
  methods: {
    async handleLogin() {
      const response = await this.$store.dispatch('auth/login', {
        username: this.username,
        password: this.password,
        remember: this.rememberMe
      })
      // 后端根据remember参数返回不同有效期的Token
    }
  }
}
</script>

表单验证增强

使用Vuelidate进行表单验证

import { required, minLength } from 'vuelidate/lib/validators'

export default {
  validations: {
    username: { required },
    password: { required, minLength: minLength(6) }
  },
  methods: {
    handleLogin() {
      this.$v.$touch()
      if (!this.$v.$invalid) {
        // 提交表单
      }
    }
  }
}