首頁 > php框架 > Laravel > 關於vue-cli4+laravel8使用JWT登入及token驗證

關於vue-cli4+laravel8使用JWT登入及token驗證

藏色散人
發布: 2021-06-01 09:06:53
轉載
3041 人瀏覽過

以下由laravel教學專欄為大家介紹vue-cli4 laravel8使用JWT登入及token驗證,希望對需要的朋友有幫助!

記錄學習中遇到的各種奇奇怪怪的問題

現在jwt和設定jwt我就不寫了

#1.後台登入方法

    public function login(Request $request){
        $arr = $request->only(['email','password']);
        if(empty($arr)){
            return $this->response->array([
                'msg'=>'is null',
                'code'=>403,
                'data' => [],
            ]);
        }
        $token = Auth::guard('api')->attempt($arr); //获取token
        //未获得token时返回错误
        if(!$token){
            return $this->responseinfo('error',403,[]);
        }
        //返回当前用户
        $userAuth =Auth::guard('api')->user();
        //查找用户信息
        $user = Login::find($userAuth->id);
        $user->update([$user->updated_at = time()]);

        return $this->response->array([
            'msg'=>'success',
            'token' => 'Bearer '.$token,
            'code' => 200
        ]);

    }
登入後複製

這裡有一個值得注意的地方,也是我踩過的一個坑:返回的token必須在前面加入「Bearer   Token」 ,這裡Bearer和Token之間有一個空格

2.前端VUE接收

axios.post('/api/index/login', {
           email: this.email,
           password: this.password   })
          .then((response) =>{
              if(response.data.code === 200 ){
                let token = response.data.token
                Toast.success('登录成功')
                window.localStorage.setItem('token',token)
                this.$store.commit('setToken',token)
                return this.$router.push('/myhome')
              }else{
                Toast.fail('账户密码错误')
              }
          })这里是我的前端请求登录方法,在这里需要在后端成功返回之后,将token值保存在本地(localStorage.setItem),因为我这里用的vantui框架,所以要加上windows. 另外将token保存至vuex中。
登入後複製

3.vuex的設定

import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({
  state: {
    // 保存公共数据 在设置vuex中的初值时,先从本地存储中取,如果取不到,则初始为空
    tokenInfo: window.localStorage.getItem('token') || {}
  },
  mutations: {
    setToken(state, tokenObj) {
      state.tokenInfo = tokenObj      // 因为刷新会丢失所以进行持久化 调用storage文件里方法
       window.localStorage.setItem('tokenInfo', tokenObj)
    }
  },
  actions: {},
  modules: {}})
登入後複製

#4 axios的設定

//请求头添加token_axios.interceptors.request.use(
  function(config) {
    let token = store.state.tokenInfo //获取token
    if (token) {
      config.headers.Authorization = token //在请求头中加入token
    }
    return config;
  },
  function(error) {
    // Do something with request error
    return Promise.reject(error);
  });
登入後複製

這樣你的登入方法就做完了,在登入後跳到首頁時,首頁發送請求來獲取使用者訊息,就會在header中攜帶token了。

vue4 + laravel8使用JWT

下面來看token令牌的驗證

1.首頁發送請求獲取用戶信息,在hearder中攜帶Token令牌

新路由中間件中間件:RefreshTokenMiddleware , 並完成設定

vue4 + laravel8使用JWT

<?php

namespace App\Http\Middleware;use Closure;use Illuminate\Http\Request;use Illuminate\Support\Facades\Auth;use Tymon\JWTAuth\Exceptions\JWTException;use Tymon\JWTAuth\Facades\JWTAuth;use Tymon\JWTAuth\Http\Middleware\BaseMiddleware;use Tymon\JWTAuth\Exceptions\TokenExpiredException;use Symfony\Component\HttpKernel\Exception\UnauthorizedHttpException;class RefreshTokenMiddleware extends BaseMiddleware{
    /**
     * Handle an incoming request.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \Closure  $next
     * @return mixed
     */
    public function handle(Request $request, Closure $next)
    {
        // 检查此次请求中是否带有 token,如果没有则抛出异常。在这里如果你的Token没有添加Bearer ,将会抛出异常检测不到token令牌
        $this->checkForToken($request);
        //         使用 try 包裹,以捕捉 token 过期所抛出的 TokenExpiredException  异常
        try {
            // 检测用户的登录状态,如果正常则通过
            if ($this->auth->parseToken()->authenticate()) {
                return $next($request);
            }
            throw new UnauthorizedHttpException('jwt-auth', '未登录');
        } catch (TokenExpiredException $exception) {
            // 此处捕获到了 token 过期所抛出的 TokenExpiredException 异常,我们在这里需要做的是刷新该用户的 token 并将它添加到响应头中
            try {
                // 刷新用户的 token
                $token = $this->auth->refresh();
                // 使用一次性登录以保证此次请求的成功
                Auth::guard('api')->onceUsingId($this->auth->manager()->getPayloadFactory()->buildClaimsCollection()->toPlainArray()['sub']);
            } catch (JWTException $exception) {
                // 如果捕获到此异常,即代表 refresh 也过期了,用户无法刷新令牌,需要重新登录。
                throw new UnauthorizedHttpException('jwt-auth', $exception->getMessage());
            }
        }

        // 在响应头中返回新的 token
        return $this->setAuthenticationHeader($next($request), $token);
    }}
登入後複製

使用中間件,並設定路由:
vue4 + laravel8使用JWT

寫上你控制器方法,你就可以正常訪問了,並且你的每次請求都是攜帶token令牌的,不過這裡有一個我還在做的事情,當token過期瀏覽器當返回401時,vue的axios要接收後端返回的請求頭裡的新token,並對舊的token進行替換,然後再次請求剛剛請求失敗的api,我也還在學習,當功能完成時我會再將我的程式碼貼出來。

相關推薦:最新的五個Laravel影片教學

#

以上是關於vue-cli4+laravel8使用JWT登入及token驗證的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:learnku.com
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板