我如何使用vue.js中的interceptor?因此,在每次请求/响应之前,它应该首先进入拦截器.我已经搜索了很多,但找不到关于这个的好文档.

我想这样使用JWTAuth:

(function (define) {
  'use strict'

  define(function (require) {

    var interceptor

    interceptor = require('rest/interceptor')

    /**
     * Authenticates the request using JWT Authentication
     *
     * @param {Client} [client] client to wrap
     * @param {Object} config
     *
     * @returns {Client}
     */
    return interceptor({
      request: function (request, config) {
        var token, headers

        token = localStorage.getItem('jwt-token')
        headers = request.headers || (request.headers = {})

        if (token !== null && token !== 'undefined') {
          headers.Authorization = token
        }

        return request
      },
      response: function (response) {
        if (response.status && response.status.code === 401) {
          localStorage.removeItem('jwt-token')
        }
        if (response.headers && response.headers.Authorization) {
          localStorage.setItem('jwt-token', response.headers.Authorization)
        }
        if (response.entity && response.entity.token && response.entity.token.length > 10) {
          localStorage.setItem('jwt-token', 'Bearer ' + response.entity.token)
        }
        return response
      }
    })

  })

}(
  typeof define === 'function' && define.amd ? define : function (factory) { module.exports = factory(require) }
  // Boilerplate for AMD and Node
))

但我不知道如何在每次请求/响应之前拦截.(我使用的是Laravel 5.2).

推荐答案

全局配置示例:

Vue.http.interceptors.push({

  request: function (request){
    request.headers['Authorization'] = auth.getAuthHeader()
    return request
  },

  response: function (response) {
    //console.log('status: ' + response.data)
    return response;
  }

});

request表示传出流量,response表示传入消息

也可以在vue组件中进行本地配置.

编辑-由于sytax现在已经更改,它应该是这样的:

Vue.http.interceptors.push((request, next)  => {
  request.headers['Authorization'] = auth.getAuthHeader()
  next((response) => {
    if(response.status == 401 ) {
      auth.logout();
      router.go('/login?unauthorized=1');
    }
  });
});

Vue.js相关问答推荐

如何以惯用的方式触发 vue3 中同级组件的效果?

Vue 3使用计算(computed)属性对象获取图像信息,在模板中呈现值时变为NaN

v-model 修饰符返回空

在 VueJS 中,将变量而不是组件的字符串名称传递给动态组件的 :is 属性不起作用

vue3 输入标签给出错误 Vue.use 不是函数

Rails Webpacker 还是 Vue-CLI?

如何对将 DOM 元素附加到 HTML 正文的 Vue 组件进行单元测试?

无法在 Vuex 中的其他操作中反跳操作

有条件地在 Vue 中添加一个 CSS 类

如何判断 Vue 组件是否处于活动状态

如何在nuxt路由中添加meta?

如果我观看解构的props,Vue 3 手表将无法正常工作

Nuxt:显示静态文件夹中的本map像

如何使用 TypeScript 在 Vue.js 中指定非react性实例属性?

在组件之间共享数据

如何告诉 Vue-cli 我的应用程序的入口点在哪里?

用于本地编辑的 Vuex 克隆对象

如何从 keep-alive 中销毁缓存的 Vue 组件?

如何设置 :id 前缀字符串?

在另一个 props 的验证器中访问 props 值