精华内容
下载资源
问答
  • Glide缓存- 图片URL带token问题

    千次阅读 2018-11-04 18:52:02
    部门项目的图片资源都是存放在阿里云上面的,最近项目重构,领导决定将内部图片和资料存放在360云,因此部分支持换成了360云。而360云为了对图片资源...http://url.com/image.jpg?token=d9caa6e02c990b0a  而使...

             部门项目的图片资源都是存放在阿里云上面的,最近项目重构,领导决定将内部图片和资料存放在360云上,因此部分支持换成了360云。而360云为了对图片资源进行保护,会在图片的URL地址的基础之上再加上一个令牌参数也就是说,一张图片的URL地址可能会是如下格式:

    http://url.com/image.jpg?token=d9caa6e02c990b0a
    

            而使用滑翔加载这张图片的话,也就会使用这个URL地址来组成缓存的关键。

            但是接下来问题就来了,令牌作为一个验证身份的参数并不是一成不变的,很有可能时时刻刻都在变化。而如果令牌变了,那么图片的URL也就跟着变了,图片的URL变了,缓存关键也就跟着变了。结果就造成了,明明是同一张图片,就因为令牌不断在改变,导致滑翔的缓存功能完全失效了,这是一个很棘手的问题。项目组的图片加载框架是下滑,但是吉尔德不能直接解决这个问题。为此,我上网找了一些解决方法,再次记录。

    解决思路

            一个图片的URL都是唯一的,假设我们可以将令牌后缀过滤,那么就可以正常使用滑翔自带的缓存,解决这个问题。

    滑行中是通过GlideUrl这个对象来作为缓存识别的。所以,大佬们的教程也是先查看对应源码。

    public class GlideUrl {
    
        private final URL url;
        private final String stringUrl;
        ...
        public GlideUrl(URL url) {
            this(url, Headers.DEFAULT);
        }
    
        public GlideUrl(String url) {
            this(url, Headers.DEFAULT);
        }
    
        public GlideUrl(URL url, Headers headers) {
            ...
            this.url = url;
            stringUrl = null;
        }
    
        public GlideUrl(String url, Headers headers) {
            ...
            this.stringUrl = url;
            this.url = null;
        }
        
        public String getCacheKey() {
            return stringUrl != null ? stringUrl : url.toString();
        }
        ...
    }

              GlideUrl类的构造函数接收两种类型的参数一种是URL字符串,一种是URL对象。然后getCacheKey()方法中的判断逻辑非常简单,如果传入的是URL字符串,那么就直接返回这个字符串本身,如果传入的是URL对象,那么就返回这个对象的toString()后的结果。

     public String getCacheKey() {
            return stringUrl != null ? stringUrl : url.toString();
        }
    

            因此,我们可以重写getCacheKey()这个方法,来过滤调图片URL里面的令牌后缀。

    解决方法

          创建一个MyGlideUrl继承自GlideUrl,代码如下所示:

    public class MyGlideUrl extends GlideUrl {
    
        private String mUrl;
    
        public MyGlideUrl(String url) {
            super(url);
            mUrl = url;
        }
    
        @Override
        public String getCacheKey() {
            return mUrl.replace(findTokenParam(), "");
        }
    
        private String findTokenParam() {
            String tokenParam = "";
            int tokenKeyIndex = mUrl.indexOf("?token=") >= 0 ? mUrl.indexOf("?token=") : mUrl.indexOf("&token=");
            if (tokenKeyIndex != -1) {
                int nextAndIndex = mUrl.indexOf("&", tokenKeyIndex + 1);
                if (nextAndIndex != -1) {
                    tokenParam = mUrl.substring(tokenKeyIndex + 1, nextAndIndex + 1);
                } else {
                    tokenParam = mUrl.substring(tokenKeyIndex);
                }
            }
            return tokenParam;
        }
    }
    

           可以看到,这里我重写了getCacheKey()方法,在里面加入了一段逻辑用于将图片URL地址中的令牌参数的这一部分移除掉。这样getCacheKey()方法得到的就是一个没有令牌参数的URL地址,从而不管令牌怎么变化,最终滑翔的缓存键都是固定不变的了。

    使用方法

           当然,定义好了MyGlideUrl还得使用它才行,将加载图片的代码改成如下方式即可:

    Glide.with(this)
         .load(new MyGlideUrl(url))
         .into(imageView);

           我们需要在负载()方法中传入这个自定义的MyGlideUrl对象,而不能再像之前那样直接传入URL字符串了。不然的话滑翔在内部还是会使用原始的GlideUrl类,而不是我们自定义的MyGlideUrl类。这样我们就将这个棘手的缓存问题给解决掉了。

    展开全文
  • 在我们使用vue开发的时候,请求后台我们通常使用axios这些第三方库来实现,但是我们在使用的时候,遇到一个问题,我们每一个请求都需要带上token,这样就增加了我们的重复工作量。 所以,我们可以对axios做一个封装...

    在我们使用vue开发的时候,请求后台我们通常使用axios这些第三方库来实现,但是我们在使用的时候,遇到一个问题,我们每一个请求都需要带上token,这样就增加了我们的重复工作量。

    所以,我们可以对axios做一个封装,让我们使用它的时候,自动带入token和url的前缀(url的前缀生产环境和开发环境可以不同)

    好了,直接上代码:

    import axios from 'axios'
    import Vue from 'vue';
    import qs from 'qs';
    //import store from '@/store';
    import { MessageBox, Message,Notification,Loading } from 'element-ui';
    import router from '@/router/index.js';
    //import store from '@/store'
    
    
    const service = axios.create({
      baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
      timeout: 30000 // request timeout
    })
    
    
    // request interceptor
    service.interceptors.request.use(
      config => {
    	  
    	//store.commit("app/SHOW_LOADING");//一个用vuex实现的全局变量,用来展示是否loadding中
    	
    	if(config.method === 'post') {
    		
    		
    		if(config.isObj&&config.isObj===true)
    		{
    		    //假如传入isObj=true,.则使用默认的application/json格式调用接口
    		}
    		else if(config.isFile&&config.isFile===true)
    		{
    			config.headers.post['Content-Type'] = 'multipart/form-data';
    		}
    		else{
    			config.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
    			 config.data = qs.stringify(config.data);
    		}
    		
    	}
    	
    	
    	  
    	let token = sessionStorage.getItem("token");
        if (token&&token!=='') {
    		
          config.headers['token'] = token // 让每个请求携带自定义token 请根据实际情况自行修改
        }
        return config
      },
      error => {
       
        console.log(error) // for debug
        return Promise.reject(error)
      }
    )
    
    // response interceptor
    service.interceptors.response.use(res => {
    	//store.commit("app/HIDE_LOADING");
      const code = res.data.code
    
      if (code === -1) {
        sessionStorage.removeItem("token");
    	router.push("/login");
      } else if (code !== 1) {
    	 
        Notification.error({
          title: res.data.msg,
        })
        return Promise.reject(res.data)
      } else {
        return res.data
      }
    },
    error => {
    	//store.commit("app/HIDE_LOADING");
      console.log('err' + error)
      Message({
        message: error.message,
        type: 'error',
        duration: 5 * 1000
      })
      return Promise.reject(error)
    }
    )
    
    export default service
    

    使用的时候的调用方法:

    //json的上传格式:
    request({
        url: '/abcdefg',
        method: 'post',
        data: { name:'aaa',sex:'男'},
        isObj:true
         
    }).then(res => {
    					
        console.log("收到回复:",res);
    });
    
    
    
    //form表单的上传格式:
    request({
        url: '/abcdefg',
        method: 'post',
        data: { name:'aaa',sex:'男'}
         
    }).then(res => {
    					
        console.log("收到回复:",res);
    });

    其中,VUE_APP_BASE_API需要在.env.development和.env.production里定义开发环境和生产环境的请求地址,这样vue就会自动根据是测试环境还是生产环境来访问后台正确的接口地址前缀。

    比如:

    在.env.development中定义:

    VUE_APP_BASE_API = 'http://127.0.0.1:8082/api'

    在.env.production中定义:

    VUE_APP_BASE_API = 'https://www.xxxxxx.com/api'

    假如需要走代理,可以在.env.development这样定义

    VUE_APP_BASE_API = '/api'

    再在vue.config.js里定义代理

       devServer: {
          host: '0.0.0.0',
          port: 3366,
    	  
          proxy: {
    
            ['/api']: {
              target: `http://192.168.1.66:8003/api`,
    	
              changeOrigin: true,
              pathRewrite: {
                ['^' + "/api"]: ''
              }
            }
          },
    	  
          disableHostCheck: true
        },

     

    展开全文
  • vue+axios请求时设置请求头(带上token

    万次阅读 多人点赞 2018-11-06 09:57:21
    1.在vue中,向后台发送请求,不管是get或post,url要带上userId,headers要带上token值 PS:登录成功后,后台会返回token和userId,存储在本地。但是跳转到其他页面时没有token,会报错undefined,所以每次请求都要...
    1.在vue中,向后台发送请求,不管是get或post,url要带上userId,headers要带上token值(本地存储的token,window.localStorage[‘token’])

    PS:登录成功后,后台会返回token和userId,存储在本地。但是跳转到其他页面时没有token,会报错undefined,所以每次请求都要带上token值。(每次跳页面, 都要获取新路由对应的html页面, 这时候可以用axios的http拦截每次路由跳转, 都先让后台验证一下token是否有效, 在http头添加token, 当后端接口返回 401 Unauthorized–未授权 ,让用户重新登录。)
    在这里插入图片描述

    展开全文
  • 1.在vue中,向后台发送请求,不管是get或post,url要带上userId,headers要带上token值(本地存储的token,window.localStorage[‘token’]) PS:登录成功后,后台会返回token和userId,存储在本地。但是跳转到...

    vue+axios请求时设置请求头(带上token)

    1.在vue中,向后台发送请求,不管是get或post,url要带上userId,headers要带上token值(本地存储的token,window.localStorage[‘token’])

    PS:登录成功后,后台会返回token和userId,存储在本地。但是跳转到其他页面时没有token,会报错undefined,所以每次请求都要带上token值。(每次跳页面, 都要获取新路由对应的html页面, 这时候可以用axios的http拦截每次路由跳转, 都先让后台验证一下token是否有效, 在http头添加token, 当后端接口返回 401 Unauthorized–未授权 ,让用户重新登录。)
    在这里插入图片描述

    展开全文
  • 目录用户登陆,发送手机号码和验证码后台接收参数,查找用户,用户存在就生成token,返回给前端前端登陆成功,把token存到vuex(做持久化)使用axios拦截器,读取vuex中的token,并放入请求头请求其他接口,就会带上token后台...
  • 前言:今天制作删除按钮时遇到了,所以就记录下来 很简单,根据表单 表单提交是这样的 <input type="hidden" name="csrf_token" value="{{ csrf_token()...$.post("url", {csrf_token:"{{ csrf_token() }}"}); ...
  • vue实现带token校验下载文件

    千次阅读 2020-09-10 16:39:12
    开始做的导出Excel功能不需要带token,这种方式是及其不合理的,数据容易泄露。经过一番折腾实现了Vue带token校验下载文件流的功能。 不带token的下载方法: 不带token下载文件,实现特别简单直接使用<a&...
  • 替换调请求url和请求方式 , 方式一和方式二任意注释一个就可以运行了 方式1用的是原生的XmlHttpRequest 方式2用的是vue常用的axios 这两种方式都可以很方便的加入header <!DOCTYPE html> <...
  • 原因:用window.location.href跳转新链接可能会当前url的源信息过去,请求头header里会加上 Referrer 值,源头不一样。直接在浏览器打开的话源头默认是空。 解决方案:在入口index.html中添加<meta name=...
  • 在使用RestTemplate请求三方接口时:三方接口一般都要求在url后面拼接上固定的几个参数,一般如accessToken进行权限校验。而我们在开发时,请求这些地址,如何避免在url...微信小程序要求在请求时带上?accesss_token...
  • 1.前言最近在做微信公众号开发在进行网页授权时,微信需要用户自己在授权url带上一个类似token的state的参数,以防止跨站攻击。在经过再三思考之后,自己试着实现一个产生token和验证token的方案。接下就把code贴...
  • 1、前言最近在做微信公众号开发在进行网页授权时,微信需要用户自己在授权url带上一个类似token的state的参数,以防止跨站攻击。在经过再三思考之后,自己试着实现一个产生token和验证token的方案。接下就把code贴...
  • 1.前言最近在做微信公众号开发在进行网页授权时,微信需要用户自己在授权url带上一个类似token的state的参数,以防止跨站攻击。在经过再三思考之后,自己试着实现一个产生token和验证token的方案。接下就把code贴...
  • 最近在做微信公众号开发在进行网页授权时,微信需要用户自己在授权url带上一个类似token的state的参数,以防止跨站攻击。 在经过再三思考之后,自己试着实现一个产生token和验证token的方案。接下就把code贴出来。...
  • 1.前言最近在做微信公众号开发在进行网页授权时,微信需要用户自己在授权url带上一个类似token的state的参数,以防止跨站攻击。在经过再三思考之后,自己试着实现一个产生token和验证token的方案。接下就把code贴...
  • 每次请求的url带上必要参数,如:token,每次返回往请求头设置参数   一、每次请求带上必要参数 1、在Zuul网关服务创建filter文件夹,并创建一个TokenFilter类,继承ZuulFilter,实现方法该类的方法   2...
  • 有DjangoRestFramework + TokenAuthentication + ContentManagerWeb的API Rest的基础 URL DOCS邮递员: 入门 这些说明将为您提供在本地计算机运行并运行的项目的副本,以进行开发和测试。 有关如何在实时系统...
  • [73]python产生tokentoken验证

    万次阅读 2018-06-14 09:10:25
    最近在做微信公众号开发在进行网页授权时,微信需要用户自己在授权url带上一个类似token的state的参数,以防止跨站攻击。 在经过再三思考之后,自己试着实现一个产生token和验证token的方案。接下就把code贴出来...
  • 流程目录说明使用@ApiModelProperty的用法@Api@ApiOperation@ApiResponse@ApilmplicitParams和@ApilmplicitParam ...对象属性 @ApiModelProperty 用在参数对象的字段 协议集描述 @Api 用在Conntroller类
  • 简单理解token机制

    2019-04-25 19:38:45
    当用户第一次登录后,服务器生成一个token并将此token返回给客户端,以后客户端只需带上这个token前来请求数据即可,无需再次带上用户名和密码。 在存储的时候把token进行对称加密存储,用到的时候再解密。文章...
  • token传参有两种一种是放在请求头里,本质是跟cookie是一样的,只是换个单词而已;另外一种是在url请求参数里,这种更直观。一、登录返回token1.如下图的这个登录,无cookies2.但是登录成功后有返回token二、请求...
  • TOKEN 单点登录的核心步骤描述1 用户未登录时访问客户端A,客户端A服务器检测到用户没登录(没有本站session,因为没传过来session对应cookie),于是通知浏览器跳转到SSO服务站点,并在跳转的URL参数中带上当前页面...
  • token和cookie的区别

    2020-11-05 19:57:45
    1、cookie 用户登录成功后,会在服务器存一个session,同时发送给客户端一个cookie,这个...用户进行任何操作时,都需要带上一个token token的存在形式有很多种,header/requestbody/url 都可以 这个token只需要存在
  • 日常号,一点点积累就对了。 进入公司实习第二周,老大给了JWTtoken认证的任务让我做。 太可怕了。我肝了两天半肝出来。可想而知我是多么菜。二话不说进入今天主题。 二:进入主题。 1、 JWT是什么? 官方解释如下...
  • access_token 每天调用的次数上限是2000次,一个access_token的有效时间是2个小时,所以我们必须在Linux服务器设置一个定时 任务,每隔2小时就获取一次access_token 0x01 获取access_token <?php $appid='你...
  • 不带斜杠就是一个网页,带上斜杠就是一个目录 ** 否则会出现错误,比如接下来这种情况: 事情是这样的。移动端的同事在调用Django接口时,明明已经有登录态,却返回未登录。于是app以为是token过期,刷新...
  • ###封装请求是否自动带上token const API_BASE_URL = 'https://***.com'; const REQUEST = (url, method, data = {}) => { return new Promise((resolve, reject) => { wx.request({ url: API_BASE_URL +...
  • 做微信公众号开发在进行网页授权时,微信需要用户自己在授权url带上一个类似token的state的参数,以防止跨站攻击。在经过再三思考之后,自己试着实现一个产生token和验证token的方案。接下就把code贴出来。希望...

空空如也

空空如也

1 2 3 4 5 ... 12
收藏数 231
精华内容 92
关键字:

url带上token