当前位置：首页 > VUE

laravel vue实现登录

2026-01-14 05:42:50VUE

使用 Laravel 和 Vue 实现登录功能

后端配置（Laravel）

确保 Laravel 已安装并配置好数据库连接。使用 Laravel 的 auth 脚手架生成默认的认证逻辑：

composer require laravel/ui
php artisan ui vue --auth
npm install && npm run dev
php artisan migrate

这会生成默认的登录、注册和密码重置视图及路由。后端 API 路由需在 routes/api.php 中定义：

use App\Http\Controllers\AuthController;

Route::post('/login', [AuthController::class, 'login']);

创建 AuthController 处理登录逻辑：

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;

class AuthController extends Controller
{
    public function login(Request $request)
    {
        $credentials = $request->validate([
            'email' => 'required|email',
            'password' => 'required',
        ]);

        if (Auth::attempt($credentials)) {
            $request->session()->regenerate();
            return response()->json(['message' => '登录成功']);
        }

        return response()->json(['message' => '认证失败'], 401);
    }
}

前端实现（Vue）

在 Vue 组件中创建登录表单并处理提交逻辑。安装 axios 用于发送 HTTP 请求：

npm install axios

创建 Login.vue 组件：

<template>
  <div>
    <form @submit.prevent="handleLogin">
      <input v-model="form.email" type="email" placeholder="邮箱" required>
      <input v-model="form.password" type="password" placeholder="密码" required>
      <button type="submit">登录</button>
    </form>
    <p v-if="error">{{ error }}</p>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      form: {
        email: '',
        password: ''
      },
      error: ''
    };
  },
  methods: {
    async handleLogin() {
      try {
        const response = await axios.post('/api/login', this.form);
        if (response.data.message === '登录成功') {
          window.location.href = '/home'; // 跳转到受保护页面
        }
      } catch (err) {
        this.error = err.response?.data?.message || '登录失败';
      }
    }
  }
};
</script>

跨域和会话配置

确保 Laravel 允许跨域请求和会话管理。在 config/cors.php 中设置：

'paths' => ['api/*'],
'allowed_methods' => ['*'],
'allowed_origins' => ['*'], // 生产环境应限制为具体域名
'allowed_headers' => ['*'],

在 .env 中配置会话驱动为 cookie：

SESSION_DRIVER=cookie
SESSION_DOMAIN=yourdomain.com
SANCTUM_STATEFUL_DOMAINS=yourdomain.com

状态管理（可选）

如需全局管理用户状态，可使用 Vuex。安装并配置 Vuex：

npm install vuex

创建 store/auth.js：

import axios from 'axios';

const state = {
  user: null,
};

const mutations = {
  SET_USER(state, user) {
    state.user = user;
  }
};

const actions = {
  async login({ commit }, credentials) {
    const response = await axios.post('/api/login', credentials);
    commit('SET_USER', response.data.user);
  }
};

export default {
  namespaced: true,
  state,
  mutations,
  actions
};

在 Login.vue 中通过 this.$store.dispatch('auth/login', this.form) 调用登录动作。

安全性增强

使用 HTTPS 保护数据传输。
实现 CSRF 保护：在 Blade 模板中添加 <meta name="csrf-token" content="{{ csrf_token() }}">，并通过 axios.defaults.headers.common['X-CSRF-TOKEN'] 设置请求头。
限制登录尝试频率：Laravel 内置 ThrottleRequests 中间件。

laravel vue实现登录