Laravel+Vue.js JWT认证：登录正常但用户/刷新API异常排查

看起来你遇到了JWT认证流程里的两个核心问题：刷新Token方法未定义，以及登录后调用用户信息、刷新接口返回undefined。咱们一步步拆解解决：

一、先解决->refresh()方法未定义的问题 #

这个问题大概率是Guard配置或JWT包使用不当导致的：

1. 确认JWT Guard配置
   检查config/auth.php，确保api guard的驱动是jwt（而非默认的token）：

   'guards' => [
       'api' => [
           'driver' => 'jwt',
           'provider' => 'users',
       ],
   ],
   

2. 明确指定使用API Guard
   在控制器构造方法中绑定auth:api中间件，确保后续接口都用JWT Guard验证：

   public function __construct()
   {
       // 刷新和用户信息接口需要登录验证，所以加上这个中间件
       $this->middleware('auth:api')->except(['login']);
   }
   

   或者在调用guard()时明确指定：

   $this->guard('api')->refresh();
   

3. 确认JWT包的正确安装配置
   如果你用的是tymondesigns/jwt-auth包，要确保完成了这些步骤：
   • 执行composer require tymon/jwt-auth安装
   • 发布配置文件：php artisan vendor:publish --provider="Tymon\JWTAuth\Providers\LaravelServiceProvider"
   • 生成JWT密钥：php artisan jwt:secret

二、解决用户信息/刷新接口返回undefined的问题 #

这个问题主要和Token传递、接口异常有关：

1. 登录接口优化：把Token同时返回在响应体
   你目前只把Token放在响应头Authorization里，前端可能没正确获取这个头（尤其是跨域场景下），导致后续请求没带Token。建议同时在响应体返回Token：

   public function login(Request $request) { 
       $credentials = $request->only('phone_number', 'password'); 
       if ($token = $this->guard('api')->attempt($credentials)) { 
           $user = $this->guard('api')->user(); 
           if ($user->block == 0 && $user->active == 1) { 
               return response()->json([
                   'status' => 'success',
                   'token' => $token // 新增这行，方便前端存储
               ], 200)->header('Authorization', $token); 
           } 
       } 
       return response()->json(['error' => 'login_error'], 401); 
   }
   

2. 修复用户信息接口的潜在报错
   如果请求没带Token，Auth::user()会返回null，直接调用->id会抛出致命错误，导致接口返回500，前端拿到undefined。加上判断并简化代码：

   public function user(Request $request) { 
       $user = Auth::guard('api')->user();
       if (!$user) {
           return response()->json(['error' => 'unauthorized'], 401);
       }
       $show = [
           'id' => $user->id,
           'name' => $user->name,
           'family' => $user->family,
           'role_id' => $user->role_id,
           'username' => $user->username,
           'image' => $user->profile_image
       ]; 
       return response()->json([ 
           'status' => 'success', 
           'data' => $show, 
       ]); 
   }
   

3. 修正刷新接口的拼写错误
   你刷新接口里的状态写成了'successs'（多了一个s），这会导致前端判断状态时出错，改成'success'：

   public function refresh() { 
       if ($token = $this->guard('api')->refresh()) { 
           return response()->json(['status' => 'success'], 200)
               ->header('Authorization', $token); 
       } 
       return response()->json(['error' => 'refresh_token_error'], 401); 
   }
   

三、前端调试建议 #

1. 确保请求携带Token
   登录成功后把Token存在localStorage或Vuex，然后通过请求拦截器自动带上Authorization头：

   // 以Axios为例
   axios.interceptors.request.use(config => {
       const token = localStorage.getItem('auth_token');
       if (token) {
           config.headers.Authorization = `Bearer ${token}`;
       }
       return config;
   });
   

2. 查看网络请求详情
   在浏览器控制台的Network标签里，检查用户信息/刷新接口的：
   • 请求头是否包含Authorization: Bearer {token}
   • 响应状态码是401（未授权）、500（服务器错误）还是200
   • 响应体的具体内容，这能帮你快速定位前端undefined的根源

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