前后端分离之JWT（JSON Web Token）的使用

caohaoyu 发布于2019-07-01 14:19 / 3046人阅读

摘要：前言由于自己开发的项目中用到了技术，前端采用了框架，后端采用了框架，故作此文帮助使用相同技术栈的朋友们。具体思路如下把后端生成的存入，然后前端切换路由刷新页面的时候，通过请求的时候带上这个，提交给后端判断当前的是否有效，后端返回结果。

前言

由于自己开发的项目中用到了 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认证的安全问题。

云服务器私有云前后端分离前后端分离开发 js前后端分离框架前后端不分离 jsp

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/31972.html

前后端分离应用——用户信息传递

摘要：前言记录前后端分离的系统应用下应用场景用户信息传递需求缘起照例先看看系统的一张经典架构图，这张图参考自网络在自定义异常，你是怎么处理的中已经对该架构做了简单说明，这里不再描述。 showImg(https://segmentfault.com/img/remote/1460000017839927?w=1024&h=768); 前言记录前后端分离的系统应用下应用场景————用户信息传...

PAMPANG 2019-08-16 14:17 评论0 收藏0
jwt前后端整合方案

摘要：到这里，基于的前后端分离实现方案就搞定啦四关于的一些思考实际上，在使用的过程中有一个比较致命的缺点，就是一旦签发了，在到期之前就会始终有效，除非服务器部署额外的逻辑。结语以上是关于基于的前后端分离实现方案的总结和思考。一、jwt是什么 JWT全称， JSON Web Token，是一个以JSON为基准的标准规范。举例：服务器认证以后，生成一个 JSON 对象，发回给用户，就像下...

nevermind 2019-08-23 17:11 评论0 收藏0
api权限管理系统与前后端分离实践

摘要：自己在前后端分离上的实践要想实现完整的前后端分离，安全这块是绕不开的，这个系统主要功能就是动态管理，这次实践包含两个模块基于搭建的权限管理系统后台编写的前端管理。自己在前后端分离上的实践要想实现完整的前后端分离，安全这块是绕不开的，这个系统主要功能就是动态restful api管理，这次实践包含两个模块,基于springBoot + shiro搭建的权限管理系统后台bootshir...

bawn 2019-06-28 16:23 评论0 收藏0
api权限管理系统与前后端分离实践

摘要：自己在前后端分离上的实践要想实现完整的前后端分离，安全这块是绕不开的，这个系统主要功能就是动态管理，这次实践包含两个模块基于搭建的权限管理系统后台编写的前端管理。自己在前后端分离上的实践要想实现完整的前后端分离，安全这块是绕不开的，这个系统主要功能就是动态restful api管理，这次实践包含两个模块,基于springBoot + shiro搭建的权限管理系统后台bootshir...

tianlai 2019-08-15 15:24 评论0 收藏0
api权限管理系统与前后端分离实践

摘要：自己在前后端分离上的实践要想实现完整的前后端分离，安全这块是绕不开的，这个系统主要功能就是动态管理，这次实践包含两个模块基于搭建的权限管理系统后台编写的前端管理。自己在前后端分离上的实践要想实现完整的前后端分离，安全这块是绕不开的，这个系统主要功能就是动态restful api管理，这次实践包含两个模块,基于springBoot + shiro搭建的权限管理系统后台bootshir...

jzman 2019-07-24 15:22 评论0 收藏0