vue登录怎样实现

Vue 登录实现方法

使用 Vue Router 和 Vuex 实现基础登录

安装必要的依赖包：

npm install vue-router vuex axios

创建路由配置文件（router/index.js）：

import Vue from 'vue'
import Router from 'vue-router'
import Login from '../views/Login.vue'
import Home from '../views/Home.vue'

Vue.use(Router)

const router = new Router({
  routes: [
    { path: '/login', component: Login },
    { path: '/', component: Home, 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

创建登录组件（Login.vue）

<template>
  <div>
    <input v-model="username" placeholder="用户名">
    <input v-model="password" type="password" placeholder="密码">
    <button @click="login">登录</button>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    login() {
      axios.post('/api/login', {
        username: this.username,
        password: this.password
      }).then(response => {
        localStorage.setItem('token', response.data.token)
        this.$router.push('/')
      }).catch(error => {
        console.error('登录失败:', error)
      })
    }
  }
}
</script>

使用 Vuex 管理登录状态

创建 store 文件（store/index.js）：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    user: null,
    isAuthenticated: false
  },
  mutations: {
    setUser(state, user) {
      state.user = user
      state.isAuthenticated = true
    },
    logout(state) {
      state.user = null
      state.isAuthenticated = false
    }
  },
  actions: {
    login({ commit }, credentials) {
      return axios.post('/api/login', credentials)
        .then(response => {
          commit('setUser', response.data.user)
          localStorage.setItem('token', response.data.token)
        })
    },
    logout({ commit }) {
      commit('logout')
      localStorage.removeItem('token')
    }
  }
})

增强安全性措施

在请求头中添加认证信息：

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

处理 token 过期：

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

实现记住我功能

修改登录方法：

login() {
  const rememberMe = this.remember // 假设有个记住我复选框
  axios.post('/api/login', {
    username: this.username,
    password: this.password
  }).then(response => {
    if (rememberMe) {
      localStorage.setItem('token', response.data.token)
    } else {
      sessionStorage.setItem('token', response.data.token)
    }
    this.$router.push('/')
  })
}

表单验证

使用 Vuelidate 进行表单验证：

npm install vuelidate

在组件中添加验证：

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

export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  validations: {
    username: { required },
    password: { required, minLength: minLength(6) }
  },
  methods: {
    login() {
      this.$v.$touch()
      if (!this.$v.$invalid) {
        // 提交登录
      }
    }
  }
}