laravel vue实现登录
Laravel 与 Vue 实现登录功能
后端 Laravel 配置
确保 Laravel 项目已安装 Laravel Sanctum 或 Passport 用于 API 认证。使用 Sanctum 的配置如下：
composer require laravel/sanctum
php artisan vendor:publish --provider="Laravel\Sanctum\SanctumServiceProvider"
php artisan migrate在 config/auth.php 中设置 API 驱动为 sanctum：
'guards' => [
'api' => [
'driver' => 'sanctum',
'provider' => 'users',
],
],创建登录控制器：
php artisan make:controller AuthController在 AuthController.php 中实现登录逻辑：
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;
public function login(Request $request)
{
$credentials = $request->validate([
'email' => 'required|email',
'password' => 'required',
]);
if (Auth::attempt($credentials)) {
$user = Auth::user();
$token = $user->createToken('authToken')->plainTextToken;
return response()->json(['token' => $token, 'user' => $user]);
}
return response()->json(['error' => 'Unauthorized'], 401);
}添加路由到 routes/api.php：
use App\Http\Controllers\AuthController;
Route::post('/login', [AuthController::class, 'login']);前端 Vue 实现
安装 Axios 用于 HTTP 请求：
npm install axios创建登录组件 Login.vue：
<template>
<div>
<input v-model="email" type="email" placeholder="Email">
<input v-model="password" type="password" placeholder="Password">
<button @click="login">Login</button>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
email: '',
password: ''
};
},
methods: {
async login() {
try {
const response = await axios.post('http://your-laravel-app.com/api/login', {
email: this.email,
password: this.password
});
localStorage.setItem('token', response.data.token);
this.$router.push('/dashboard');
} catch (error) {
console.error('Login failed:', error.response.data.error);
}
}
}
};
</script>前端路由保护
在 Vue 路由中设置导航守卫以保护需要认证的路由：
import Vue from 'vue';
import Router from 'vue-router';
import axios from 'axios';
Vue.use(Router);
const router = new Router({
routes: [
{ path: '/login', component: Login },
{ path: '/dashboard', component: Dashboard, meta: { requiresAuth: true } }
]
});
router.beforeEach((to, from, next) => {
if (to.matched.some(record => record.meta.requiresAuth)) {
const token = localStorage.getItem('token');
if (!token) {
next('/login');
} else {
axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;
next();
}
} else {
next();
}
});后端中间件保护
创建中间件保护 API 路由：
php artisan make:middleware AuthenticateAPI在 AuthenticateAPI.php 中：
public function handle($request, Closure $next)
{
if (!Auth::guard('sanctum')->check()) {
return response()->json(['error' => 'Unauthorized'], 401);
}
return $next($request);
}注册中间件到 app/Http/Kernel.php：
protected $routeMiddleware = [
'auth.api' => \App\Http\Middleware\AuthenticateAPI::class,
];保护路由：
Route::middleware('auth.api')->group(function () {
Route::get('/user', function () {
return Auth::user();
});
});跨域配置
在 config/cors.php 中配置允许的源和方法：
'paths' => ['api/*'],
'allowed_methods' => ['*'],
'allowed_origins' => ['http://your-vue-app.com'],
'allowed_headers' => ['*'],确保在 app/Http/Middleware/VerifyCsrfToken.php 中排除 API 路由：
protected $except = [
'api/*'
];
