1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

// 引入路由

import router from '@/router'

// 配置响应拦截器

axios.interceptors.response.use(function (response) {

  // 正常响应处理

  return response

}, function (error) {

  // 非正常响应处理(包括401)

  // console.dir(error) // 对象： config request response isAxiosError toJSON

  if (error.response.status === 401) {

    // token失效(token在服务器端已经失效了，2个小时时效)

    // 强制用户重新登录系统，以刷新服务器端的token时效

    router.push('/login')

    // 不要给做错误提示了

    return new Promise(function () {}) // 空的Promise对象，没有机会执行catch，进而不做错误提示了

  }

  // return new Promise((resolve,reject)=>{

  // reject('获得文章失败！')

  // })

  return Promise.reject(error)

})

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

// 响应拦截器 （响应成功：剥离无效数据，响应失败：刷新token）

instance.interceptors.response.use(res => {

  // 将来获取数据：res.data.data 麻烦

  // 想要结果：data 即可

  try {

    return res.data.data

  } catch (e) {

    return res

  }

}, async err => {

  try {

    // 目的：刷新token

    if (err.response && err.response.status === 401) {

    // 未登录  跳转登录页面  阻止程序运行

      const { user } = store.state

      // 如果没有token没登录  如果没有refresh_token无法刷新token

      if (!user.token || !user.refresh_token) {

        router.push('/login')

        return Promise.reject(err)

      }

      // 刷新token，发请求，没有配置的axios，自己配置refresh_token

      const res = await axios({

        url: 'http://ttapi.research.itcast.cn/app/v1_0/authorizations',

        method: 'put',

        headers: {

          Authorization: `Bearer ${user.refresh_token}`

        }

      })

      // token获取  res.data.data.token

      // 更新 vuex 和 本地 token

      store.commit('setUser', {

        token: res.data.data.token,

        refresh_token: user.refresh_token

      })

      // 继续发送刚才错误的请求

      // instance({之前错误的请求配置})

      // err错误对象 包含（response 响应对象 |config 请求配置）

      return instance(err.config)

    }

  } catch (e) { // exception 异常

    // 刷新token失败

    router.push('/login')

    return Promise.reject(e)

  }

  return Promise.reject(err)

})

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

import store from '@/store' // 引入vuex中的store实例

import router from '@/router' // 引入路由对象实例

……

// 响应拦截器

instance.interceptors.response.use(

  function (response) {

    try {

      // 返回具体有价值的业务数据

      return response.data.data

    } catch (error) {

      return response.data

    }

  },

  async function (error) {

    // 响应有错误，有可能错误状态码为401

    if (error.response && error.response.status === 401) {

      // 定义登录路由对象

      let toPath = {

        name: 'login',

        query: { redirectUrl: router.currentRoute.path }

      } // 跳转对象

      // 如果refresh_token不存在

      if (!store.state.user.refresh_token) {

        router.push(toPath)

        return Promise.reject(error)

      }

      try {

        // 刷新用户token

        // 应该发送一个请求 换取新的token

        // 这里不应该再用instance  因为 instance会再次进入拦截器  用默认的axios

        let result = await axios({

          method: 'put',

          url: 'http://ttapi.research.itcast.cn/app/v1_0/authorizations',

          headers: {

            Authorization: `Bearer ${store.state.user.refresh_token}`

          }

        })

        // 获取到新token后，就对vuex和localStorage进行更新

        store.commit('updateUser', {

          token: result.data.data.token, // 拿到新的token之后

          refresh_token: store.state.user.refresh_token // 将之前 refresh_token 14天有效期

        })

        return instance(error.config) // 把刚才错误的请求再次发送出去 然后将promise返回

      } catch (err) {

        // 如果错误 表示补救措施也没用了(有可能refresh_token也失效了)

        // 应该跳转到登录页 并且 把废掉的用户信息全都干掉

        store.commit('clearUser') // 所有的用户信息清空

        router.push(toPath) // 跳转到回登录页

        return Promise.reject(err)

      }

    }

    return Promise.reject(error)

  }

)

') // 所有的用户信息清空

        router.push(toPath) // 跳转到回登录页

        return Promise.reject(err)

      }

    }

    return Promise.reject(error)

  }

)