Vue2.x --导航守卫、axios请求响应拦截器、对象解构

导航守卫

用来通过跳转或取消的方式守卫导航
参数或查询的改变并不会触发进入/离开的导航守卫

- 前置守卫 — router.beforeEach
路由跳转前做相应处理

//判断跳转至用户页前是否有token
//to是目的路由,from是触发路由,next是下一步的函数
//PS:一定调用next作为导航守卫的出口,否则一直在等待
router.beforeEach((to, from, next) => {
  const hasToken = localStorage.getItem('token')
  if (to.name === 'user' ) {
    if (hasToken) {
      return next()
    } else {
    return router.replace("/login")
    }
  }
  return next()
})

- 代码优化
随着项目的推进,需要用到导航守卫的路由地址或许会很多个,避免守卫里的判断条件过多,可以再路由中加入是否要进入导航守卫的参数meta: { isAuthor: true }

//其中注册不需要token,个人页需要token,即个人页需要用到导航守卫

const router = new VueRouter({
  routes = [
 {
      //注册页
      path: '/register',
      name: 'register',
      component: () => import('@/views/user/register.vue')
    },
    {
      //个人页
      path: '/user',
      name: 'user',
      component: () => import('@/views/user/user.vue'),
      //添加认证配置
      meta: { isAuthor: true }
    },
]
})

//此时判断目的路由中meta配置的isAuthor是否为true
router.beforeEach((to, from, next) => {
  const hasToken = localStorage.getItem('token')
  if (to.meta.isAuthor) {
    if (hasToken) {
      return next()
    } else {
        return router.replace("/login")
    }
  }
  return next()
})

axios请求响应拦截器 – axios.interceptors.response.use

统一处理响应错误

• 原理
  
• 配置

//由于是监听全局的请求结果,所以可以在全局文件main.js使用
//如果请求失败,则提示 --- 用的是vant中的轻提示 toast 

import axios from "axios"
import { Toast } from 'vant';

// axios响应拦截器
axios.interceptors.response.use(res => {
    const { message, statusCode } = res.data;
    //请求结果错误监听,如果请求结果的状态码是4开头的,则都是请求失败
    const errRegExp = /^4\d{2}$/;

    //错误提醒
    if (message && errRegExp.test(statusCode)) {
        setTimeout(() => {
            Toast.fail(`${message},请重新登录`);
        }, 500);
    }
    //处理完后一定要return放行
    return res;
})

额外的查漏补缺:
对象解构

//一级解构
let obj ={name:'A',age:12,person:{name2:'B',age2:13}}

let {name,age,person} = obj
console.log(name,age,person) //A 12 {name: "B", age: 13}

//二级解构
let {person:{name2,age2}} = obj
console.log(name2,age2) //  B 13