Vue.js页面刷新后如何保留登录状态？SPA开发新手求助

核心问题是你用的Auth::attempt基于Session 认证，Blade作为服务端渲染页面，Laravel会自动维护session cookie，刷新后状态保留；但SPA是前端独立应用，默认不会自动携带session凭证，且前端未持久化登录状态，导致刷新后丢失。

具体解决步骤 #

1. 前端先做登录状态持久化（临时显示用，需配合后端认证） #

登录成功后把用户信息存在localStorage，页面加载时读取恢复状态：

// 登录请求成功后
localStorage.setItem('loggedUser', JSON.stringify(response.data));

// 页面初始化时（比如Vue组件的mounted钩子）
mounted() {
  const savedUser = localStorage.getItem('loggedUser');
  if (savedUser) {
    // 恢复到Vuex状态或组件数据中
    this.currentUser = JSON.parse(savedUser);
  }
}

2. 配置Session认证跨域（如果想继续用Session） #

• 修改config/cors.php，开启跨域携带凭证：

  'supports_credentials' => true,
  

• 前端请求时带上withCredentials（以axios为例）：

  axios.post('/api/login', yourFormData, { withCredentials: true })
  

• 确保API路由使用包含session的中间件，比如在routes/api.php中给路由添加web中间件（不推荐，更适合用Sanctum）。

3. 改用Laravel Sanctum做Token认证（SPA官方推荐方案） #

这是更适合SPA的认证方式，步骤如下：

1. 安装并配置Sanctum：

   composer require laravel/sanctum
   php artisan vendor:publish --provider="Laravel\Sanctum\SanctumServiceProvider"
   php artisan migrate
   

2. 在app/Http/Kernel.php的api中间件组添加：

   \Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful::class,
   

3. 在User模型引入HasApiTokens trait：

   use Laravel\Sanctum\HasApiTokens;
   
   class User extends Authenticatable
   {
       use HasApiTokens, HasFactory, Notifiable;
   }
   

4. 修改你的api_login方法，生成并返回token：

   public function api_login(Request $req)
   {
       // 注意：不要手动hash密码！Auth::attempt会自动用配置的算法验证
       // 如果你注册时用了md5，这里要和注册逻辑一致，但md5不安全，建议改用bcrypt
       if (Auth::attempt(['email' => $req->email, 'password' => $req->password])) {
           $user = Auth::user();
           $token = $user->createToken('spa-login-token')->plainTextToken;
           return response()->json([
               'user' => $user,
               'token' => $token
           ]);
       } else {
           return response()->json(['message' => 'no user found'], 401);
       }
   }
   

5. 前端处理token：

   // 登录成功后保存token和用户信息
   localStorage.setItem('authToken', response.data.token);
   localStorage.setItem('loggedUser', JSON.stringify(response.data.user));
   
   // 全局配置axios自动携带token
   axios.interceptors.request.use(config => {
       const token = localStorage.getItem('authToken');
       if (token) {
           config.headers.Authorization = `Bearer ${token}`;
       }
       return config;
   });
   

6. 页面刷新时，从localStorage读取token和用户信息恢复状态，可额外请求/api/user接口验证token有效性。

4. 修正密码哈希的错误 #

你代码里手动用hash('md5', $req->password)是错误的：

• Laravel默认注册时用bcrypt哈希密码，Auth::attempt会自动用该算法验证原始密码，手动hash会导致验证逻辑混乱。
• 如果注册时确实用了md5，需保证前后端哈希一致，但md5安全性极低，强烈建议改用Laravel默认的bcrypt。

内容的提问来源于stack exchange，提问作者Andrew