首页-教程-开发语言

关于vue-cli4+laravel8使用JWT登录及token验证

 4498

下面给大家介绍vue-cli4+laravel8使用JWT登录及token验证，希望对需要的朋友有所帮助！

现在jwt和配置jwt我就不写了

1、后台登录方法

  1. public function login(Request $request){
  2.     $arr = $request->only(['email','password']);
  3.     if(empty($arr)){
  4.         return $this->response->array([
  5.             'msg'=>'is null',
  6.             'code'=>403,
  7.             'data' => [],
  8.         ]);
  9.     }
  10.     $token = Auth::guard('api')->attempt($arr); //获取token
  11.     //未获得token时返回错误
  12.     if(!$token){
  13.         return $this->responseinfo('error',403,[]);
  14.     }
  15.     //返回当前用户
  16.     $userAuth =Auth::guard('api')->user();
  17.     //查找用户信息
  18.     $user = Login::find($userAuth->id);
  19.     $user->update([$user->updated_at = time()]);
  20.  
  21.     return $this->response->array([
  22.         'msg'=>'success',
  23.         'token' => 'Bearer '.$token,
  24.         'code' => 200
  25.     ]);
  26.  
  27. }

这里有一个值得注意的地方，也是我踩过的一个坑：返回的token必须在前面加入“Bearer +Token” ，这里Bearer和Token之间有一个空格

2、前端VUE接收

  1. axios.post('/api/index/login', {
  2.     email: this.email,
  3.     password: this.password
  4. })
  5. .then((response) =>{
  6.     if(response.data.code === 200 ){
  7.         let token = response.data.token
  8.         Toast.success('登录成功')
  9.         window.localStorage.setItem('token',token)
  10.         this.$store.commit('setToken',token)
  11.         return this.$router.push('/myhome')
  12.     }else{
  13.         Toast.fail('账户密码错误')
  14.     }
  15. })

这里是我的前端请求登录方法，在这里需要在后端成功返回之后，将token值保存在本地（localStorage.setItem），因为我这里用的vantui框架，所以要加上windows. 另外将token保存至vuex中。

3、vuex的配置

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

4、axios的配置

  1. //请求头添加token_axios.interceptors.request.use(
  2. function(config) {
  3.     let token = store.state.tokenInfo //获取token
  4.     if (token) {
  5.       config.headers.Authorization = token //在请求头中加入token
  6.     }
  7.     return config;
  8. },
  9. function(error) {
  10.     // Do something with request error
  11.     return Promise.reject(error);
  12. });

这样你的登录方法就做完了，在登录后跳转至首页时，首页发送请求来获取用户信息，就会在header中携带token了。


60b444cf9f3db.png


下面来看一下token令牌的验证

1、首页发送请求获取用户信息，在hearder中携带Token令牌

新建路由中间件中间件：RefreshTokenMiddleware ， 并完成配置


60b444f308952.png


  1. <?php
  2.  
  3. 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{
  4.     /**
  5.      * Handle an incoming request.
  6.      *
  7.      * @param  \Illuminate\Http\Request  $request
  8.      * @param  \Closure  $next
  9.      * @return mixed
  10.      */
  11.     public function handle(Request $request, Closure $next)
  12.     {
  13.         // 检查此次请求中是否带有 token，如果没有则抛出异常。在这里如果你的Token没有添加Bearer ，将会抛出异常检测不到token令牌
  14.         $this->checkForToken($request);
  15.         //         使用 try 包裹，以捕捉 token 过期所抛出的 TokenExpiredException  异常
  16.         try {
  17.             // 检测用户的登录状态，如果正常则通过
  18.             if ($this->auth->parseToken()->authenticate()) {
  19.                 return $next($request);
  20.             }
  21.             throw new UnauthorizedHttpException('jwt-auth', '未登录');
  22.         } catch (TokenExpiredException $exception) {
  23.             // 此处捕获到了 token 过期所抛出的 TokenExpiredException 异常，我们在这里需要做的是刷新该用户的 token 并将它添加到响应头中
  24.             try {
  25.                 // 刷新用户的 token
  26.                 $token = $this->auth->refresh();
  27.                 // 使用一次性登录以保证此次请求的成功
  28.                 Auth::guard('api')->onceUsingId($this->auth->manager()->getPayloadFactory()->buildClaimsCollection()->toPlainArray()['sub']);
  29.             } catch (JWTException $exception) {
  30.                 // 如果捕获到此异常，即代表 refresh 也过期了，用户无法刷新令牌，需要重新登录。
  31.                 throw new UnauthorizedHttpException('jwt-auth', $exception->getMessage());
  32.             }
  33.         }
  34.  
  35.         // 在响应头中返回新的 token
  36.         return $this->setAuthenticationHeader($next($request), $token);
  37.     }
  38. }

使用中间件，并配置路由：


60b44b8e63e36.png


写上你控制器方法，你就可以正常访问了，并且你的每次请求都是携带token令牌的，不过这里有一个我还在做的事情，当token过期浏览器返回401时，vue的axios要接收后端返回的请求头里的新token，并对旧的token进行替换，然后再次请求刚刚请求失败的api，我也还在学习，当功能完成时我会再将我的代码贴出来。


TAG标签：
本文网址：https://www.zztuku.com/index.php/detail-8912.html
站长图库 - 关于vue-cli4+laravel8使用JWT登录及token验证
申明：如有侵犯，请 联系我们 删除。

评论（0）条

您还没有登录，请 登录 后发表评论！

提示：请勿发布广告垃圾评论，否则封号处理！！

    编辑推荐