vue登录怎么实现

Vue 登录实现方法

基础登录表单实现

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

<template>
  <div>
    <input v-model="username" placeholder="用户名" type="text">
    <input v-model="password" placeholder="密码" type="password">
    <button @click="handleLogin">登录</button>
  </div>
</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>

路由配置与导航守卫

在 Vue Router 中配置登录路由并设置导航守卫：

// router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/views/Login.vue'
import Dashboard from '@/views/Dashboard.vue'

Vue.use(Router)

const router = new Router({
  routes: [
    { path: '/login', component: Login },
    { path: '/dashboard', component: Dashboard, meta: { requiresAuth: true } }
  ]
})

router.beforeEach((to, from, next) => {
  const isAuthenticated = localStorage.getItem('token')
  if (to.matched.some(record => record.meta.requiresAuth) && !isAuthenticated) {
    next('/login')
  } else {
    next()
  }
})

export default router

状态管理实现

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

// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    user: null,
    token: null
  },
  mutations: {
    SET_USER(state, user) {
      state.user = user
    },
    SET_TOKEN(state, token) {
      state.token = token
    }
  },
  actions: {
    login({ commit }, { username, password }) {
      return axios.post('/api/login', { username, password })
        .then(response => {
          commit('SET_USER', response.data.user)
          commit('SET_TOKEN', response.data.token)
          localStorage.setItem('token', response.data.token)
        })
    },
    logout({ commit }) {
      commit('SET_USER', null)
      commit('SET_TOKEN', null)
      localStorage.removeItem('token')
    }
  }
})

表单验证增强

添加表单验证逻辑，确保输入符合要求：

<template>
  <form @submit.prevent="handleLogin">
    <div>
      <input v-model="form.username" placeholder="用户名">
      <span v-if="errors.username">{{ errors.username }}</span>
    </div>
    <div>
      <input v-model="form.password" type="password" placeholder="密码">
      <span v-if="errors.password">{{ errors.password }}</span>
    </div>
    <button type="submit" :disabled="isSubmitting">登录</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: '',
        password: ''
      },
      errors: {},
      isSubmitting: false
    }
  },
  methods: {
    validateForm() {
      this.errors = {}
      if (!this.form.username) this.errors.username = '请输入用户名'
      if (!this.form.password) this.errors.password = '请输入密码'
      return Object.keys(this.errors).length === 0
    },
    async handleLogin() {
      if (!this.validateForm()) return
      this.isSubmitting = true
      try {
        await this.$store.dispatch('login', this.form)
        this.$router.push('/dashboard')
      } catch (error) {
        this.errors.form = error.response?.data?.message || '登录失败'
      } finally {
        this.isSubmitting = false
      }
    }
  }
}
</script>

安全增强措施

实现 JWT 刷新机制和 CSRF 防护：

// axios 拦截器配置
axios.interceptors.request.use(config => {
  const token = localStorage.getItem('token')
  if (token) {
    config.headers.Authorization = `Bearer ${token}`
  }
  return config
}, error => {
  return Promise.reject(error)
})

axios.interceptors.response.use(response => {
  return response
}, async error => {
  const originalRequest = error.config
  if (error.response.status === 401 && !originalRequest._retry) {
    originalRequest._retry = true
    try {
      const response = await axios.post('/api/refresh', {
        refreshToken: localStorage.getItem('refreshToken')
      })
      localStorage.setItem('token', response.data.token)
      return axios(originalRequest)
    } catch (refreshError) {
      store.dispatch('logout')
      router.push('/login')
      return Promise.reject(refreshError)
    }
  }
  return Promise.reject(error)
})