下面給大家介紹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了。
下面來看一下token令牌的驗證
1、首頁發送請求獲取用戶信息，在hearder中攜帶Token令牌
新建路由中間件中間件：RefreshTokenMiddleware ， 并完成配置
<?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);
}
}使用中間件，并配置路由：
寫上你控制器方法，你就可以正常訪問了，并且你的每次請求都是攜帶token令牌的，不過這里有一個我還在做的事情，當token過期瀏覽器返回401時，vue的axios要接收后端返回的請求頭里的新token，并對舊的token進行替換，然后再次請求剛剛請求失敗的api，我也還在學習，當功能完成時我會再將我的代碼貼出來。
