当前位置：首页 > VUE

vue怎么实现登录功能

2026-02-21 07:24:23VUE

实现登录功能的基本步骤

安装必要的依赖，如axios用于发送HTTP请求，vue-router用于页面跳转管理。

npm install axios vue-router

创建登录页面组件

在src/views目录下创建Login.vue文件，包含用户名和密码输入框及提交按钮。

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

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    async handleLogin() {
      try {
        const response = await this.$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>

配置路由

在src/router/index.js中设置登录页面的路由。

vue怎么实现登录功能

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

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/login',
      name: 'Login',
      component: Login
    }
  ]
})

设置请求拦截器

在src/main.js中配置axios全局实例和请求拦截器，用于自动添加认证令牌。

import axios from 'axios'

Vue.prototype.$axios = axios.create({
  baseURL: 'http://your-api-domain.com'
})

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

实现路由守卫

在路由配置中添加导航守卫，保护需要认证的路由。

vue怎么实现登录功能

router.beforeEach((to, from, next) => {
  const isAuthenticated = localStorage.getItem('token')
  if (to.name !== 'Login' && !isAuthenticated) {
    next({ name: 'Login' })
  } else {
    next()
  }
})

处理登出功能

在需要的地方添加登出方法，清除本地存储的令牌并重定向到登录页。

methods: {
  logout() {
    localStorage.removeItem('token')
    this.$router.push('/login')
  }
}

后端接口实现示例

Node.js Express后端处理登录请求的示例代码。

const express = require('express')
const jwt = require('jsonwebtoken')
const app = express()

app.post('/api/login', (req, res) => {
  // 验证用户名和密码
  const token = jwt.sign({ userId: 123 }, 'your-secret-key', { expiresIn: '1h' })
  res.json({ token })
})