vue登陆实现

Vue 登录实现方法

前端部分实现

创建登录表单组件，使用v-model绑定用户名和密码数据

<template>
  <form @submit.prevent="handleLogin">
    <input v-model="username" 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
        })
        localStorage.setItem('token', response.data.token)
        this.$router.push('/dashboard')
      } catch (error) {
        console.error('登录失败:', error)
      }
    }
  }
}
</script>

后端API接口

创建Express.js登录路由示例

const express = require('express')
const jwt = require('jsonwebtoken')
const router = express.Router()

router.post('/login', (req, res) => {
  const { username, password } = req.body
  // 实际项目中应查询数据库验证用户
  if(username === 'admin' && password === '123456') {
    const token = jwt.sign({ username }, 'secret_key', { expiresIn: '1h' })
    return res.json({ token })
  }
  res.status(401).json({ error: '认证失败' })
})

路由守卫配置

在Vue路由中配置导航守卫保护需要认证的路由

import router from './router'
import store from './store'

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

状态管理

使用Vuex管理用户认证状态

const store = 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 }, userData) {
      return axios.post('/api/login', userData)
        .then(response => {
          commit('setUser', response.data.user)
          localStorage.setItem('token', response.data.token)
        })
    }
  }
})

请求拦截器

配置axios请求拦截器自动添加认证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)
})

响应拦截器

配置axios响应拦截器处理401未授权错误

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