laravel 和 vuejs 的身份验证问题

Posted 2023-03-10

【中文标题】laravel 和 vuejs 的身份验证问题

【英文标题】：Issue with authentication with laravel and vuejs

【发布时间】：2020-06-21 17:02:45

【问题描述】：

我已经在 laravel 作为后端和 vueJs 在前端进行了身份验证。 我使用了jwt 包。所以注册、登录和注销的所有请求都可以工作。

我所做的是客户端在登录时输入了他的邮件和密码； 它在DB 中检查它，如果没问题，它会返回令牌并将其保存在文档 cookie 中。 当客户端注销时，令牌将从 cookie 中删除。

但我发现当我用一个浏览器登录一次并退出时；如果我尝试使用相同的电子邮件但使用错误密码从同一浏览器重新登录，它将被记录并最终返回令牌。

我也检查了本地存储，我清​​除了浏览器和项目的缓存。

这是我的代码： 在后端： 控制器：

<?php
namespace App\Http\Controllers;

use Illuminate\Support\Facades\Auth;
use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
//use Illuminate\Support\Facades\Hash;
use App\User;
class AuthController extends Controller

    /**
     * Create a new AuthController instance.
     *
     * @return void
     */
    public function __construct()
    
        $this->middleware('auth:api')->except(['login','register','logout']);
    

    /**
     * Get a JWT via given credentials.
     *
     * @return \Illuminate\Http\JsonResponse
     */
    public function register()
    

        User::create([
            'name' => request('name'),
            'email' => request('email'),
            'password' => \Hash::make(request('password'))
        ]);

        return $this->login(request());
    


    /**
     * Get a JWT via given credentials.
     *
     * @return \Illuminate\Http\JsonResponse
     */
    public function login()
    
        $credentials = [
            'email' => request('email'),
            'password' => request('password'),
        ];

        $token = auth()->attempt($credentials);
        if (!$token) 
            return response()->json(['error' => 'Unauthorized'], 401);
        
        return $this->respondWithToken($token);
    

    /**
     * Get the authenticated User.
     *
     * @return \Illuminate\Http\JsonResponse
     */
    public function me()
    
        return response()->json(auth()->user());
    

    /**
     * Log the user out (Invalidate the token).
     *
     * @return \Illuminate\Http\JsonResponse
     */
    public function logout()
    
        auth()->logout();
        return response()->json(['message' => 'Successfully logged out']);
    

    /**
     * Refresh a token.
     *
     * @return \Illuminate\Http\JsonResponse
     */
    public function refresh()
    
        return $this->respondWithToken(auth()->refresh());
    

    /**
     * Get the token array structure.
     *
     * @param  string $token
     *
     * @return \Illuminate\Http\JsonResponse
     */
    protected function respondWithToken($token)
    
        return response()->json([
            'access_token' => $token,
            'token_type' => 'bearer',
            'expires_in' => $this->guard()->factory()->getTTL() * 60,
            'user' => auth()->user()
        ]);
    

    /**
     * Get the guard to be used during authentication.
     *
     * @return \Illuminate\Contracts\Auth\Guard
     */
    public function guard()
    
        return Auth::guard();
     

登录页面脚本：

export default 
  name: 'login-page',
  bodyClass: 'login-page',
  components: 
    Card,
    MainFooter,
    [Button.name]: Button,
    [FormGroupInput.name]: FormGroupInput,
    Alert,
  ,
    data()
      return 
        user:
          email:"",
          password:""
        ,
        error:"",
      
    ,
    methods:
      login()
        if (!this.user.email && !this.user.password ) 
           this.errors.push('email or Password required.');
         else 
          axios.post('http://localhost:8000/api/auth/login',
            email:this.user.email,
            password:this.user.paswword
        ).then(response =>
          console.log(response.data);
          this.$store.state.token =response.data.access_token
          this.$store.commit("loginSuccess", response);
         this.$router.push( name: 'profile');
        ).catch(error=>
        console.log(error.message)
        )
        console.log("login function");
        
      ,

    

;

注销脚本

data()
    return
      logoutMsg:"",
      
    ,
    methods:
         logout()
          axios.post('http://localhost:8000/api/auth/logout',token:this.$store.state.token).then(response =>
            console.log(response.data.message);
            this.logoutMsg = response.data.message;
            this.$store.commit('logout');
            this.$router.push(name: 'login', params: logoutState: true , message: this.logoutMsg );
          ),
          console.log( this.$store.state.isLoggedIn + "  // logout function");
        
    
;

store.js

import  getLocalUser  from "./helpers";

const user = getLocalUser();

export default(

    state: 
        isLoggedIn: !!user,
        token:user,
    ,
    getters:
        isLoggedIn(state) 
            return state.isLoggedIn;
        ,
        token(state) 
            return state.token;
        ,
    ,
    mutations:
            loginSuccess(state, payload) 
                state.isLoggedIn = true;
                document.cookie = state.token;+"expires= Thu, 21 Aug 2014 20:00:00 UTC"
                //localStorage.setItem("user", state.currentUser);
            ,
            logout(state) 
                //localStorage.removeItem("user");
                document.cookie = "; expires = Thu, 01 Jan 1970 00:00:00 GMT"
                state.isLoggedIn = false;
                state.currentUser = null;
                state.token = null;
            ,

    ,
    actions:
        login(context) 
            context.commit("login");
        ,

    ,
  );

helpers.js

export function getLocalUser() 
    const userStr = document.cookie

    if(!userStr) 
        return null;
    

    return userStr;

【问题讨论】：

你使用哪个版本的 laravel？

@Joseph Laravel 框架 6.16.0

@kHarshit 感谢您的编辑 :)

尝试使用JWTAuth::attempt()而不是auth()->attempt()并记得添加它的命名空间use Tymon\JWTAuth\Facades\JWTAuth;

【参考方案1】：

您需要使身份验证令牌无效。

将此添加到 logout() 函数中：

$token = auth()->tokenById(auth()->user()->id);
auth()->invalidate($token);
auth()->invalidate(true);
auth()->logout();

【讨论】：

我这样做了，但它仍然返回 token 。实际上我试着不写密码，它也返回了令牌。所以我认为他不检查密码：/

【参考方案2】：

所以这是注销的问题，但不仅如此。 实际上，我登录时注册组件中的“此密码”存在语法错误。