vue 怎么实现登录

实现登录功能的方法

前端部分

使用 Vue.js 结合 Vue Router 和 Vuex 实现前端登录功能。创建登录表单，包含用户名和密码输入框，提交按钮。使用 v-model 双向绑定数据。

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

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    handleLogin() {
      this.$store.dispatch('login', {
        username: this.username,
        password: this.password
      })
    }
  }
}
</script>

状态管理

在 Vuex store 中定义登录相关的状态和 mutations。使用 actions 处理异步登录请求。

// store.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: {
    async login({ commit }, credentials) {
      const response = await axios.post('/api/login', credentials)
      commit('SET_USER', response.data.user)
      commit('SET_TOKEN', response.data.token)
      localStorage.setItem('token', response.data.token)
      router.push('/dashboard')
    }
  }
})

路由配置

配置路由守卫，保护需要认证的路由。在路由配置中添加 meta 字段标记需要认证的路由。

// router.js
import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

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

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

export default router

后端接口

后端需要提供登录接口，验证用户凭证并返回 token。示例使用 Node.js Express 框架。

// server.js
const express = require('express')
const jwt = require('jsonwebtoken')
const app = express()

app.post('/api/login', (req, res) => {
  const { username, password } = req.body
  // 验证用户凭证
  if (username === 'admin' && password === '123456') {
    const token = jwt.sign({ username }, 'secret_key', { expiresIn: '1h' })
    res.json({ user: { username }, token })
  } else {
    res.status(401).json({ error: 'Invalid credentials' })
  }
})

app.listen(3000, () => console.log('Server running on port 3000'))

请求拦截

在 axios 拦截器中添加 token 到请求头，实现自动认证。

// api.js
import axios from '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)
})

错误处理

在登录失败时显示错误信息，增强用户体验。

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

<script>
export default {
  data() {
    return {
      username: '',
      password: '',
      error: ''
    }
  },
  methods: {
    handleLogin() {
      this.$store.dispatch('login', {
        username: this.username,
        password: this.password
      }).catch(error => {
        this.error = error.response.data.error || '登录失败'
      })
    }
  }
}
</script>