精华内容
下载资源
问答
  • token失效请求返回新token再次请求的情况 post (target, params = {}) { let suffix = Object.keys(params).map(name => { return `${name}=${params[name]}` }).join('&') let urls = suffix....

    token失效请求返回新token再次请求的情况

    post (target, params = {}) {
          let suffix = Object.keys(params).map(name => {
            return `${name}=${params[name]}`
          }).join('&')
          let urls = suffix.length > 0 ? `${target}?${suffix}` : `${target}`
          return new Promise((resolve, reject) => {
            let urls1=urls//保存地址 
            axios.post(urls).then(res => {
              if(res.status==200){
                resolve(res.data)
                    //验证是否含有token切不是登录接口
              }else if (res.data.hasOwnProperty('accessToken')&&urls1.indexOf('login')<0) {
                    //再次请求
                axios.post(urls1).then(res => {
                  resolve(res)
                }).catch((err) => {
                  reject(err)
                })
              }else{
                resolve(res)
              }
            }).catch((err) => {
              reject(err)
            })
          })
        },

     

    展开全文
  • 此开箱即用,详情使用请看https://www.cnblogs.com/panax/p/10942889.html
  • 一、封装axios import axios from 'axios' ...const TIME_OUT_MS = 60 * 1000 // 默认请求超时时间 //axios.defaults.baseURL = 'http://localhost:8080'; // http request 拦截器 ...
    一、封装axios
     
    import axios from 'axios'
    import qs from "qs"
     
     
    const TIME_OUT_MS = 60 * 1000 // 默认请求超时时间
    //axios.defaults.baseURL = 'http://localhost:8080';
     
     
    // http request 拦截器
    axios.interceptors.request.use(
        config => {
            if ($cookies.get("access_token")) {  // 判断是否存在token,如果存在的话,则每个http header都加上token
                config.headers.Authorization ='Bearer '+ $cookies.get("access_token");
            }
            return config;
        },
        err => {
            return Promise.reject(err);
    });
     
     
    // http response 拦截器
    axios.interceptors.response.use(
        response => {
            return response;
        },
        error => {
            console.log("response error :"+error);
            if (error.response) {
                switch (error.response.status) {
                    case 401:
                        console.log("token 过期");
                        var config = error.config;
                        refresh(config);
                        return;
                }
            }
            return Promise.reject(error)   // 返回接口返回的错误信息
        });
    /*
    *刷新token
    */
    function refresh(config){
        var refreshToken = $cookies.get("refresh_token");
        var grant_type = "refresh_token";
        axios({
            method: 'post',
            url: '/oauth/token',
            data: handleParams({"grant_type":grant_type,"refresh_token":refreshToken}),
            timeout: TIME_OUT_MS,
            headers: {}
        }).then(
            (result) => {
                if(result.data.access_token){   //重新保存token
                    $cookies.set("access_token",result.data.access_token);
                    $cookies.set("refresh_token",result.data.refresh_token);
                    //需要重新执行
                    axios(config);
                }else{
     
     
                    //this.$events.emit('goto', 'login');
                    window.location.reload();
                }
            }
        ).catch((error) => {
            //this.$events.emit('goto','login');
            window.location.reload();
        });
    }
    /*
    * @param response 返回数据列表
    */
    function handleResults (response) {
     
     
        var result = {
            success: false,
            message: '',
            status: [],
            errorCode: '',
            data: {}
        }
        if (response.status == '200') {
            result.status = response.status;
            result.data = response.data;
            result.success = true;
        }
        return result
    }
     
     
    // function handleUrl (url) {
    //     //url = BASE_URL + url
    //     url =root +url;
    // // BASE_URL是接口的ip前缀,比如http:10.100.1.1:8989/
    //     return url
    // }
     
     
    /*
    * @param data 参数列表
    * @return
    */
    function handleParams (data) {
        return qs.stringify(data);
    }
     
     
    export default {
        /*
         * @param url
         * @param data
         * @param response 请求成功时的回调函数
         * @param exception 异常的回调函数
         */
        post (url, data, response, exception) {
            axios({
                method: 'post',
                //url: handleUrl(url),
                url: url,
                data: handleParams(data),
                timeout: TIME_OUT_MS,
                headers: {
                    //'Content-Type': 'application/json; charset=UTF-8'
                }
            }).then(
                (result) => {
                    response(handleResults(result))
                }
            ).catch(
                (error) => {
                    if (exception) {
                        exception(error)
                    } else {
                        console.log(error)
                    }
                }
            )
        },
        /*
         * get 请求
         * @param url
         * @param response 请求成功时的回调函数
         * @param exception 异常的回调函数
         */
        get (url,data, response, exception) {
            axios({
                method: 'get',
                url: url,
                params:data,
                timeout: TIME_OUT_MS,
                headers: {
                    'Content-Type': 'application/json; charset=UTF-8'
                }
            }).then(
                (result) => {
                    response(handleResults(result))
                }
            ).catch(
                (error) => {
                    console.log("error"+response);
                    if (exception) {
                        exception(error)
                    } else {
                        console.log(error)
                    }
                }
            )
        }
    }
    

      

     
     
    二、配置axios 跨域,以及请求baseUrl
    1.config-->index.js
    ’
    'use strict'
    // Template version: 1.3.1
    // see http://vuejs-templates.github.io/webpack for documentation.
     
     
    const path = require('path')
     
     
    //引入跨域配置
    var proxyConfig = require('./proxyConfig')
     
     
    module.exports = {
        dev: {
     
     
            // Paths
            assetsSubDirectory: 'static',
            assetsPublicPath: '/',
            //proxyTable: {},  //默认跨域配置为空
            proxyTable: proxyConfig.proxy,
     
     
            // Various Dev Server settings
            host: 'localhost', // can be overwritten by process.env.HOST
            port: 8886, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
            autoOpenBrowser: false,
            errorOverlay: true,
            notifyOnErrors: true,
            poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
     
     
     
     
            /**
             * Source Maps
             */
     
     
            // https://webpack.js.org/configuration/devtool/#development
            devtool: 'cheap-module-eval-source-map',
     
     
            // If you have problems debugging vue-files in devtools,
            // set this to false - it *may* help
            // https://vue-loader.vuejs.org/en/options.html#cachebusting
            cacheBusting: true,
     
     
            cssSourceMap: true
        },
     
     
        build: {
            // Template for index.html
            index: path.resolve(__dirname, '../dist/index.html'),
     
     
            // Paths
            assetsRoot: path.resolve(__dirname, '../dist'),
            assetsSubDirectory: 'static',
            // 项目名字改变时这里需要变化 原先为assetsPublicPath: '.'
            assetsPublicPath: './',
     
     
            /**
             * Source Maps
             */
     
     
            productionSourceMap: true,
            // https://webpack.js.org/configuration/devtool/#production
            devtool: '#source-map',
     
     
            // Gzip off by default as many popular static hosts such as
            // Surge or Netlify already gzip all static assets for you.
            // Before setting to `true`, make sure to:
            // npm install --save-dev compression-webpack-plugin
            productionGzip: false,
            productionGzipExtensions: ['js', 'css'],
     
     
            // Run the build command with an extra argument to
            // View the bundle analyzer report after build finishes:
            // `npm run build --report`
            // Set to `true` or `false` to always turn it on or off
            bundleAnalyzerReport: process.env.npm_config_report
        }
    }
    

      

     
    2.config目录下创建一个文件 proxyConfig.js文件
    module.exports={
        proxy:{
            '/':{ //将localhost:8081 映射为 /apis
                target:'http://localhost:8080',//接口地址
                changeOrigin: true,// 如果接口跨域,需要进行这个参数配置
                secure:false, //如果接口是HTTPS接口,需要设置成true
                pathRewrite:{
                    '^/':''
                }
            }
        }
    }
    

      

     
    三、封装API 请求Url  port.js
     
    export default {
        oauth: {
            login: '/oauth/token', // 登录
            logout: '/oauth/logout' // // 退出
        },
        user: {
            addUser: '/user/add',
            updateUser: '/user/update',
            getUser:'/user/',  //+ Id
            exists:'/exists/',  // +id
            enable:'/enable/',  // +id
            disable:'/disable/', // +id
            delete:'/delete/',    //+id
            password:'/password ',
            query:'/query'
        }
    }
    

      

     
     
    四、main.js 引入
    import http from './plugins/http.js'
    import ports from './plugins/ports'
    Vue.prototype.http = http
    Vue.prototype.ports = ports

     

     
    五、使用
    login.vue中使用
    login() {
        this.http.post(this.ports.oauth.login,{username:this.userId,
            password:this.password,grant_type:'password'}, res => {
            if (res.success) {
            // 返回正确的处理
            页面跳转
            this.$events.emit('goto', 'edit');
        } else {
            // 返回错误的处理
            //alert("等待处理");
        }
    },err =>{
            //console.log("正在处理"+err.response.status);
            if(err.response.status=='400'){
                //显示用户名或密码错误
                this.$refs.username.focus();
                this.$refs.hint.click();
            }
        })
        
    }
    

      

     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     

    转载于:https://www.cnblogs.com/Actexpler-S/p/10915299.html

    展开全文
  • token失效请求头中需要带上token的请求就会报错,axios请求拦截中会对异常做处理并显示弹框。如果同时多个请求报错就会显示多个弹框。这样很影响用户体验,我们只需要弹出框弹出一次。 以下是解决方法: // ...

    token失效,请求头中需要带上token的请求就会报错,axios的请求拦截中会对异常做处理并显示弹框。如果同时多个请求报错就会显示多个弹框。这样很影响用户体验,我们只需要弹出框弹出一次。
    以下是解决方法:

    // 设置一个变量
    let tokenAbnormal = false;
    // 下面是部分异常处理的代码
    // 异常处理
    if (res.statusCode === 401 || res.statusCode === 402 || res.statusCode === 403 || res.statusCode === 400) {
      const tips = {
        400: '请重新登录',
        401: '您的帐号已解矫',
        402: '您的帐号已解除绑定,请重新登录',
        403: '您的帐号已被移出'
      }
      // token无效 清空auth缓存
      wepy.$instance.globalData.authInfo = null
      if (!tokenAbnormal) {
        tokenAbnormal = true
        // 弹出框
        await Tips.modal(tips[res.statusCode])
        // 设置定时器,确保下次异常时弹出框正常弹出
        setTimeout(() => {
          tokenAbnormal = false;
        }, 3000);
      }
      console.log('账号异常:', obj)
      wx.redirectTo({
        url: '/pages/login/index'
      })
    }
    

    如果有不对的地方,欢迎指正哦~

    展开全文
  • axios请求登录失效后阻止其他请求

    千次阅读 2019-04-23 13:46:00
    const CancelToken = axios.CancelToken; const source = CancelToken.source(); axios.interceptors.request.use( config =>... config.cancelToken = source.token; // 全局添加cancelToken ...
    const CancelToken = axios.CancelToken;
    const source = CancelToken.source();
    
    axios.interceptors.request.use(
        config => {
            config.cancelToken = source.token; // 全局添加cancelToken
                return config;
            },
            err => {
                return Promise.reject(err);
            }
       );
    /** 设置响应拦截 **/
    axios.interceptors.response.use(
        response => {
            // 登录失效101
            if ( response.data.code===101) {
                source.cancel(); // 取消其他正在进行的请求
               // some coding
            }
            return response;
        },
        error => {
            if (axios.isCancel(error)) { // 取消请求的情况下,终端Promise调用链
                return new Promise(() => {});
            } else {
                return Promise.reject(error);
            }
        }
    );

     

    转载于:https://www.cnblogs.com/zhaoxiaoying/p/10755918.html

    展开全文
  • 后端使用java写的 前端用axios请求 加了请求拦截 每次请求时在headers插入token 在浏览器中的报错信息
  • 网络请求Axios;方式:vue add axios 缓存方案 全局变量:Vuex 本地缓存:LocalStorage 技术依赖 你猜 背景 公司开发一个嵌入App的Web页面,安全方面使用老套路:App通过URL传参给前端(包含签...
  • const service = axios.create({ baseURL: 'http://127.0.0.1:5555/', headers: { 'content-type': 'application/x-www-form-urlencoded;charset=UTF-8', }, // 配置超时时间 timeout: 5000, }); // 请求拦截
  • 经过代码细读,发现这个项目除了登录,其余的接口统统需要使用token,这里就用到了请求拦截器向header中添加x-access-token和响应拦截器,请求之前由于后端没处理跨域的Access-Control-Allow-Origin: *,前端接到之后...
  • axios token权限认证请求机制 涉及到登陆后token存储本地,axios全局配置请求头,axios请求拦截器和处理器。
  • 我们只希望他弹出一条提示,解决办法也很简单,在我们封装请求的js文件中加一个判断即可,先声明一个变量showMsg来控制是否需要弹框,初始化为true,然后在请求判断中如果token失效导致走了401,先判断当前是否可以...
  • 这里说的preflight指的是CORS跨域中的preflight请求,详细了解请查阅这里 结果 this.$axios.get(url, { params: { username: this.loginForm.username, password: this.loginForm.password } }).then(res => { ...
  • 在项目实践中,使用axios设置请求头headers,结果在请求过程中请求头中并没有包含headers中设置的请求头信息,而且后台也没有接收到前台设置的请求头信息,导致数据无法进行校验,请求失败 GET 请求方式 import...
  • axios请求封装

    2020-12-21 17:51:54
    分享我的vue项目axios请求接口统一封装 接下来是目录结构图片展示 接下来是http.js封装的是接口请求拦截和响应拦截(http.js是核心文件) import axios from 'axios'; import { Message, MessageBox } from ...
  • axios token过期刷新

    千次阅读 2019-01-22 14:58:49
    Axios token刷新,拦截器设置 此项目是用vue做的管理报表系统,代码中的“quasar”是基于vue的框架 需求:出于安全性考虑,每次发起请求需要在header里带上token,并设置过期时间,在过期时间内重新请求可以刷新...
  • axios请求拦截器

    千次阅读 2018-08-28 10:56:50
    2:token本地存在,但是却失效了 所以不可以只判断是否token存在 请求时服务器返回的是401错误,授权出错,也就是没有权利访问该页面。 解决问题: 发送所有请求之前和操作服务器响应数据之前对这种情况过滤。 ...
  • 关于axios请求封装

    2020-04-27 12:16:37
    axios请求封装 axios请求封装基本上能在各个vue项目中复用,只需要小小改动即可,为减少重复工作量,现将封装方法记录下来,仅供参考 // .env.development // 开发环境下的配置文件 (VUE_APP_BASE_API可自定义,...
  • 封装axios请求

    千次阅读 2019-08-01 09:49:10
    1、新建request.js文件 注意点:当请求头为:application/x-www-form-urlencoded; charset=utf-8需要通过引入qs来序列化数据qs.stringify...import axios from 'axios' import router from '@/router' import qs ...
  • import axios from 'axios'; import store from '../store'; import router from '../router'; import Vue from 'vue'; //设置过期时间 axios.defaults.timeout = ... //给请求添加token if(store.state.token){ .
  • 企业级axios请求封装

    2020-04-04 11:09:56
    整理一个基于axios请求封装 首先是request.js,这个文件是用来处理axios的配置、设置拦截器等等,它创建了一个实例,并将这个实例导出。代码如下,注释都写在里面啦 import Vue from 'vue' import axios from 'axios...
  • // 添加请求拦截器,在请求头中加token axios.interceptors.request.use( config => { let token = sessionStorage.getItem('Authorization'); if (token) { config.headers.Authorization = token; } ...
  • const instance = axios.create({ baseURL: baseURL, timeout: 30000, }); export const interceptorsRequsetFun = (config) => { // let Token = get("token"); let Token = sessionStorage.token; let ...
  • 在处理token过期的这个问题上困扰了我很久,现在终于解决的了,所以分享出来给大家,希望能够对大家有所帮助。 首先,当然是路由进行拦截,路由拦截当然是在beforeEach中了: router.beforeEach((to, from, ...
  • 封装axios请求方法2

    2020-09-07 17:19:40
    import axios from 'axios' import { Message } from 'element-ui' import store from '@/store' import { getToken } from '@/utils/auth' // create an axios instance const service = axios.create({ baseURL: ...
  • axios请求封装简版

    2021-03-10 14:51:47
    请求封装 import axios from 'axios' import router from './router/index' import { message } from 'element-ui'; import qs from 'qs' function getToken() { if (localStorage.getItem('token')) { let ...
  • 在做vue、react项目的时候常会用axios请求库来与后端进行数据交互。我们通常采用一个用户凭证token来验证用户身份,服务器根据token进行判断当前用户是否有权限调用接口。 经常遇到的一个问题是,调用接口时token...
  • vue 封装axios请求

    2019-12-03 14:57:08
    在src/utils/request.js import axios from 'axios' import { Message } from 'element-ui' ... * 请求拦截器 负责将客户端标识token值存储并放置在头部提交给服务端 * * 响应拦截器 负责全局处...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,046
精华内容 818
关键字:

axios请求的token失效