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/*'
];