laravel vue实现登录
使用 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中间件。
