tp+jwt

后端

1、先安装phpjwt（需要composer安装）

composer require firebase/php-jwt

2、验证类

  1. <?php
  2. namespace appindexcontroller;
  3. use FirebaseJWTJWT;
  4.  
  5. class Jwttoken
  6. {
  7.     //生成token
  8.     public function createJwt($username)
  9.     {
  10.         $key    = md5('nobita'); //jwt的签发密钥，验证token的时候需要用到
  11.         $time   = time();
  12.         $expire = $time + 14400; //过期时间
  13.         $token  = array(
  14.             "username" => $username,
  15.             "iss"      => "",//签发组织
  16.             "aud"      => "", //签发作者
  17.             "iat"      => $time, //签发时间
  18.             "nbf"      => $time, //生效时间
  19.             "exp"      => $expire
  20.         );
  21.         $jwt    = JWT::encode($token, $key);
  22.         return $jwt;
  23.     }
  24.  
  25.  
  26.     //校验jwt权限API
  27.     public function verifyJwt($jwt)
  28.     {
  29.         $key = md5('nobita');
  30.         try {
  31.             $jwtAuth  = json_encode(JWT::decode($jwt, $key, array('HS256')));
  32.             $authInfo = json_decode($jwtAuth, true);
  33.             $msg      = [];
  34.             if (!empty($authInfo['username'])) {
  35.                 $msg = [
  36.                     'status'   => 0,
  37.                     'msg'      => 'Token验证通过',
  38.                     'username' => $authInfo['username']
  39.                 ];
  40.             } else {
  41.                 //Token验证不通过,用户不存在
  42.                 $msg = [
  43.                     'status' => 10001,
  44.                     'msg'    => '当前用户不存在'
  45.                 ];
  46.             }
  47.             return json_encode($msg);
  48.         } catch (FirebaseJWTSignatureInvalidException $e) {
  49.             echo json_encode([
  50.                 'status' => 10002,
  51.                 'msg'    => 'Token无效'
  52.             ]);
  53.             exit;
  54.         } catch (FirebaseJWTExpiredException $e) {
  55.             //Token过期
  56.             echo json_encode([
  57.                 'status' => 10003,
  58.                 'msg'    => '登录信息已超时，请重新登录'
  59.             ]);
  60.             exit;
  61.         } catch (Exception $e) {
  62.             echo json_encode([
  63.                 'status' => 10004,
  64.                 'msg'    => '未知错误'
  65.             ]);
  66.             exit;
  67.         }
  68.     }
  69. }

3、公共类统一验证

  1. <?php
  2.  
  3. namespace appindexcontroller;
  4.  
  5. use thinkController;
  6. use thinkRequest;
  7. use appindexcontrollerJwttoken;
  8.  
  9. header('Access-Control-Allow-Origin: *');
  10. header('Access-Control-Allow-Methods:POST, GET, PUT, DELETE, OPTIONS');
  11. header('Access-Control-Allow-Headers:x-requested-with,content-type,Authorization');
  12.  
  13. class Common extends Controller
  14. {
  15.     //定义一个空的登录信息
  16.     public $username = null;
  17.  
  18.     public function _initialize()
  19.     {
  20.         parent::_initialize();
  21.         $this->checkToken();
  22.     }
  23.  
  24.     public function checkToken()
  25.     {
  26.         $header = Request::instance()->header();
  27.         if (isset($header['authorization'])) {
  28.             if ($header['authorization'] == 'null') {
  29.                 echo json_encode([
  30.                     'status' => 10005,
  31.                     'msg'    => 'Token不存在,拒绝访问'
  32.                 ]);
  33.                 exit;
  34.             } else {
  35.                 $token         = new Jwttoken;
  36.                 $checkJwtToken = $token->verifyJwt($header['authorization']);
  37.                 //验证通过
  38.                 if (json_decode($checkJwtToken, true)['status'] == 0) {
  39.                     //验证成功之后 继承了公共类的所有方法都可以直接调用登录用户 不用额外传参
  40.                     $this->username = json_decode($checkJwtToken, true)['username'];
  41.                     return true;
  42.                 }
  43.             }
  44.         } else {
  45.             //Token不存在,拒绝访问
  46.             return json_encode([
  47.                 'status' => 10006,
  48.                 'msg'    => '请勿非法登录'
  49.             ]);
  50.             exit;
  51.         }
  52.  
  53.     }
  54. }

4、登录控制器（登录控制器不用继承公共类，登录成功之后把生成的token返回给前端）

  1. <?php
  2.  
  3.  
  4. namespace appindexcontroller;
  5.  
  6. use appindexcontrollerJwttoken;
  7. use thinkController;
  8. use thinkDb;
  9.  
  10. header('Access-Control-Allow-Origin: *');
  11. header('Access-Control-Allow-Methods:POST, GET, PUT, DELETE, OPTIONS');
  12. header('Access-Control-Allow-Headers:x-requested-with,content-type,Authorization');
  13.  
  14.  
  15. class Login extends Controller
  16. {
  17.  
  18.     public function login()
  19.     {
  20.         if (Request()->isPost()) {
  21.             $data  = input();
  22.             $isset = db('user')->where('username', $data['username'])->find();
  23.             if (!$isset) {
  24.                 return json(['error' => '1000', 'errormsg' => '当前用户不存在']);
  25.             }
  26.             if (md5($data['password']) != $isset['password']) {
  27.                 return json(['error' => '1000', 'errormsg' => '密码错误']);
  28.             } else {
  29.                 $token      = new Jwttoken();
  30.                 $user_token = $token->createJwt($isset['username']);
  31.                 return json(['error' => '0', 'errormsg' => '登录成功', 'token' => $user_token]);
  32.             }
  33.         }
  34.     }
  35.  
  36. }

前端（vue+element）

1、登录操作（登录成功之后把token存入localStorage）

  1. loginSubmit() {
  2.   this.$refs['loginForm'].validate(async valid => {
  3.     if (valid) {
  4.       const {
  5.         data: result
  6.       } = await this.$http.post("/index/login/login", this.loginForm)
  7.       if (result.error != 0) {
  8.         this.$message.error(result.errormsg)
  9.         return false;
  10.       } else {
  11.         this.$message.success(result.errormsg)
  12.         window.localStorage.setItem('token', result.token);
  13.         this.getuserinfo()
  14.         this.gettypelist()
  15.         this.getbooklist(0)
  16.         this.logindialog = false
  17.         this.loginForm = {
  18.           username: '',
  19.           password: '',
  20.         }
  21.       }
  22.     } else {
  23.       return false;
  24.     }
  25.   });
  26. }

2、在main.js设置请求拦截器和响应拦截器

  1. import Vue from 'vue'
  2. import App from './App.vue'
  3. import router from './router'
  4. import ElementUI from 'element-ui';
  5. import 'element-ui/lib/theme-chalk/index.css';
  6.  
  7. import axios from 'axios'
  8.  
  9. Vue.config.productionTip = false
  10. Vue.use(ElementUI);
  11. Vue.prototype.$http = axios
  12. //配置请求根路径
  13. axios.defaults.baseURL = 'http://www.shifuchen.top'
  14.  
  15. //请求拦截器
  16. axios.interceptors.request.use(config => {
  17.   config.headers.Authorization = window.localStorage.getItem('token')
  18.   return config
  19. }, error => {
  20.   Promise.reject(error)
  21. })
  22. // 添加响应拦截器
  23. axios.interceptors.response.use(response => {
  24.   const status = response.data.status
  25.   const msg = response.data.msg
  26.   if (status > 10000) {
  27.     ElementUI.Message({
  28.       message: msg,
  29.       type: 'error'
  30.     });
  31.     window.localStorage.clear();
  32.     return false;
  33.   } else {
  34.     return response
  35.   }
  36. }, error => {
  37.   Promise.reject(error)
  38. });
  39.  
  40. new Vue({
  41.   router,
  42.   render: h => h(App)
  43. }).$mount('#app')

3、在路由中挂载路由守卫router/index.js（判断token过期或者不合法直接跳转到登录页面）

  1. //挂载路由导航守卫
  2. router.beforeEach((to, from, next) => {
  3.   //to将要访问的路径
  4.   //from从哪个路径跳转而来
  5.   //next放心函数 next()直接放行 next('/login')强制访问
  6.   if (to.path === '/login') return next();
  7.   //获取token
  8.   const tokenStr = window.localStorage.getItem('token');
  9.   if (!tokenStr) return next('/login')
  10.   next()
  11. })
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/ianlab/p/14142761.html