详解给Vue2路由导航钩子和axios拦截器做个封装

让我们来详细讲解“详解给Vue2路由导航钩子和axios拦截器做个封装”的攻略。

1. Vue2路由导航钩子封装

路由导航钩子是Vue Router 提供的一种非常有用的功能，它允许我们在路由跳转时执行一些额外的逻辑，例如验证用户是否登录、切换页面时的动画效果等。我们可以使用全局导航钩子或者单独路由的导航钩子。这里我们介绍一下全局导航钩子的封装：

import router from './router'

router.beforeEach((to, from, next) => {
  if (to.meta.requireAuth) {
    if (localStorage.getItem('userToken')) {
      next()
    } else {
      next({
        path: '/login',
        query: { redirect: to.fullPath },
      })
    }
  } else {
    next()
  }
})

解析：

• beforeEach 导航守卫，表示路由跳转前将要执行的动作。
• to 表示即将去往的页面路由对象。
• from 表示即将离开的页面路由对象。
• next 表示跳转到下一个路由，next()代表放行，next('path')代表跳转到指定路由。

以上代码实现了一个全局路由导航钩子，如果需要访问的页面需要验证用户是否已登录，就判断本地存储中是否有用户 token，如果有就放行，否则就跳转到登录页面，并把当前路由作为查询参数传给登录页面。

2. Axios拦截器封装

Axios 是一个非常流行的 HTTP 请求库，在前后端分离的开发模式中被广泛使用。但是在项目中，我们可能需要对请求和响应做一些额外的处理，例如添加请求头信息、添加 token 鉴权等。这时候就可以使用 Axios 拦截器来实现。

下面是一个 Axios 拦截器的封装示例：

import axios from 'axios'

axios.interceptors.request.use(
  config => {
    if (localStorage.getItem('userToken')) {
      config.headers.Authorization = `Bearer ${localStorage.getItem('userToken')}`
    }
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

axios.interceptors.response.use(
  response => {
    return response
  },
  error => {
    if (error.response.status === 401) {
      localStorage.removeItem('userToken')
      router.push('/login')
    }
    return Promise.reject(error)
  }
)

解析：

• request 拦截器拦截所有请求，可以在请求头中添加 token 等信息。
• response 拦截器拦截所有响应，可以在响应中做一些额外的处理，例如添加错误信息、token 过期处理等。
• 以上示例中，使用了 localStorage 来保存用户 token。

以上就是给Vue2路由导航钩子和axios拦截器做个封装的攻略，希望对你有所帮助。