前后端分离之JWT(JSON Web Token)的使用

前言

由于自己开发的项目中用到了 JWT 技术,前端采用了 Vue.js 框架,后端采用了 CodeIgniter 框架,故作此文帮助使用相同技术栈的朋友们。

具体思路如下:
把后端生成的 JWT token 存入 localStorage,然后前端切换路由(刷新页面)的时候,通过 Ajax 请求的时候带上这个 token,提交给后端判断当前的 token 是否有效,后端返回结果。

JWT 用处很多,可以用于后台权限的限制、接口安全性校验。

使用教程

前端 Vue.js

vue-router

登录时,将后端返回的 token 存入 localStorage

使用 Vue-Router 判断是否存在 token,不存在跳转至登录

// JWT 用户权限校验,判断 TOKEN 是否在 localStorage 当中
router.beforeEach(({name}, from, next) => {
  // 获取 JWT Token
  if (localStorage.getItem('JWT_TOKEN')) {
    // 如果用户在login页面
    if (name === 'login') {
      next('/');
    } else {
      next();
    }
  } else {
    if (name === 'login') {
      next();
    } else {
      next({name: 'login'});
    }
  }
});

axios

axios 全局配置拦截器
每次向后端请求携带 头信息

src/main.js 当中加上以下代码:

// http request 拦截器
axios.interceptors.request.use(
  config => {
    if (localStorage.JWT_TOKEN) {  // 判断是否存在token,如果存在的话,则每个http header都加上token
      config.headers.Authorization = `token ${localStorage.JWT_TOKEN}`;
    }
    return config;
  },
  err => {
    return Promise.reject(err);
  });

// http response 拦截器
axios.interceptors.response.use(
  response => {
    return response;
  },
  error => {
    if (error.response) {
      console.log('axios:' + error.response.status);
      switch (error.response.status) {
        case 401:
          // 返回 401 清除token信息并跳转到登录页面
          store.commit('LOG_OUT');
          router.replace({
            path: 'login',
            query: {redirect: router.currentRoute.fullPath}
          });
      }
    }
    return Promise.reject(error.response.data);   // 返回接口返回的错误信息
  });

Vue.prototype.$http = axios;

后端 CodeIgniter

后端 Controller 接收请求头信息,验证 token 有效性,无效返回 401 状态码

    $header = $this->input->get_request_header('Authorization', TRUE); // 获取请求头 Authorization
    list($token) = sscanf($header, 'token %s'); // 提取 token
    if ($header != '' && jwt_helper::validate($token)) {
        $userid = jwt_helper::decode($header)->userId; // 解码token 提取 userId 字段
        // do something
    } else {
        show_error("Permission denied", 401, "Please check your token."); // 401错误
    }
这里提供了自己使用的封装好的 JWT Helper 类 和 JWT 的库 使用方法和文件可以访问 Github
仓库:https://github.com/52admln/JW...

安全性

可参考文章:http://www.cnblogs.com/xiekel... 当中的基于JWT的Token认证的安全问题


52admin's Blog
52admin's Blog
901 声望
27 粉丝
0 条评论
推荐阅读
HTML 转 PDF 图文报表实践
导出 PDF 图文报表实践 方法一: jsPDF 使用 jsPDF 时,需要注意的是其默认单位为 mm,需要在 new jsPDF() 时传入配置 {代码...} 这个方法废了。这个鬼东西多行文本和多个图片,简直要人命! 方法二: wkhtmltopd...

52admln15阅读 5.7k

如何使用 PHPStorm 进行优雅的项目开发?
PHP Storm 这个开发工具,很多 phper 应该有所耳闻,甚至也有不少人使用其作为生产工具,但是很多人都没有最大限度的使用它,本文就来总结一些优雅开发的小技巧。

唯一丶45阅读 4.8k评论 7

怎样用 PHP 来实现枚举?
在数学和计算机科学理论中,一个集的枚举是列出某些有穷序列集的所有成员的程序,或者是一种特定类型对象的计数。这两种类型经常(但不总是)重叠。枚举是一个被命名的整型常数的集合,枚举在日常生活中很常见,...

唯一丶25阅读 6.3k评论 4

Vue中的diff算法
diff算法是一种通过同层的树节点进行比较的高效算法,避免了对树进行逐层搜索遍历,所以时间复杂度只有 O(n)。diff算法的在很多场景下都有应用,例如在 vue 虚拟 dom 渲染成真实 dom 的新旧 VNode 节点比较更新时...

款冬27阅读 13.3k评论 7

给我实现一个前端的 Excel 导入和导出功能
前言【负责人 A】:现在报表部分基于接口的 Excel 的导入和导出功能有点慢,前端这边能不能实现一下这个功能,然后我们在比对看看效果!【切图仔 B】: 接口这边不能优化一下吗?比如排查下慢的原因什么的。【负...

熊的猫19阅读 2.5k

封面图
vue中style scope深度访问新方式(:deep())
1、>>>如果vue的style使用的是css,那么则 {代码...} 但是像scss等预处理器却无法解析>>>,所以我们使用下面的方式.2、/deep/ {代码...} 但是有些开发者反应,在vue-cli3编译时,deep的方式会...

寒水寺一禅11阅读 34.8k评论 9

一个开源vue网站博客,nuxt开源网站,前后端分离项目
开媛笔记,基于nuxt ssr首屏服务器端渲染 。用于分享、记录、交流和学习,希望可以帮助到小伙伴们。同时网站在不断更新,创造属于猿(媛)的世界 -$Bao Yalong ..Let's Go! [链接]

jigsaw16阅读 8.4k评论 3

901 声望
27 粉丝
宣传栏