前言由于在自己开发的项目中使用了JWT技术，因此前端使用了Vue.js框架，后台-end使用CodeIgniter框架。本文旨在帮助使用相同技术Stack的朋友。具体思路如下：将后端生成的JWTtoken存储在localStorage中，然后在前端切换路由（刷新页面）时，通过Ajax请求时带上这个token，提交给后端判断当前token是否有效，后端返回结果。JWT有很多用途，可以用于后台权限限制和接口安全验证。使用教程前端Vue.jsvue-router登录时，将后端返回的token存储到localStorage中使用Vue-Router判断是否有token，如果没有则跳转到登录//JWT用户权限验证，并判断TOKEN是否在localStoragerouter.beforeEach(({name},from,next)=>{//获取JWTTokenif(localStorage.getItem('JWT_TOKEN')){//如果用户在登录pageif(name==='login'){next('/');}else{next();}}else{if(name==='login'){next();}else{next({name:'登录'});}}});axiosaxios全局配置拦截器每次向后端请求header信息，在src/main.js中添加如下代码：//http请求拦截器axios.interceptors.request.use(config=>{if(localStorage.JWT_TOKEN){//判断token是否存在，存在则将token添加到每个http头config.headers.Authorization=`token${localStorage.JWT_TOKEN}`;}returnconfig;},err=>{returnPromise.reject(err);});//http响应拦截器axios.interceptors.response.use(response=>{returnresponse;},error=>{if(error.response){console.log('axios:'+error.response.地位);switch(error.response.status){case401://返回401清除token信息，跳转到登录页面store.commit('LOG_OUT');router.replace({path:'login',query:{redirect:router.currentRoute.fullPath}});}}返回Promise.reject(error.response.data);//返回接口返回的错误信息});Vue.prototype.$http=axios;backendCodeIgniterbackendController接收到请求头信息，验证token的有效性，如果无效则返回401状态码$header=$this->input->get_request_header('Authorization',TRUE);//获取请求头Authorizationlist($token)=sscanf($header,'token%s');//提取令牌if($header!=''&&jwt_helper::validate($token)){$userid=jwt_helper::decode($header)->userId;//解码令牌提取userId字段//做一些事情}else{show_error("Permissiondenied",401,"Pleasecheckyourtoken.");//401error}这里提供自己使用的封装好的JWTHelper类和JWT库使用方法和文件可以访问Github仓库：https://github.com/52admln/JW...安全请参考文章：http://www.cnblogs.com/xiekel中基于JWT的Token认证的安全问题...
