vue路由导航卫士以及请求拦截器

• 路由导航卫士

所谓路由导航卫士即是通过一定的条件对路由进行控制,比如通过判断是否存在token决定是跳转到下一个页面还是登录页面,下面我们来看一段代码

import Vue from 'vue'
import VueRouter from 'vue-router'

/* 相关组件 */

Vue.use(VueRouter)

const routes = [
  { path: '/', redirect: '/login' },
  { path: '/login', component: Login },
  {
    path: '/home',
    component: home,
    redirect: '/welecome',
    children: [
      { path: '/welecome', component: welecome },
      { path: '/users', component: user },
      { path: '/rights', component: rights },
      { path: '/roles', component: roles }
    ]
  }
]

const router = new VueRouter({
  routes
})

// 设置路由导航卫士,通过判断是否存在token,对网页访问权限进行设置
router.beforeEach((to, from, next) => {
  // to表示将要访问的地址
  // from表示从哪个路径跳转而来
  // next是放行函数  next()放行    next('/path')强制跳转
  if (to.path === '/login') return next()
  const tokenStr = window.sessionStorage.getItem('token')
  if (!tokenStr) return next('/login')
  next()
})

export default router

 

注意,这段代码是给这个路由加上了路由导航卫士,实现方法是利用vue-router的beforeEach钩子函数,路由钩子含税有两种,一种就是之前我们用到的beforeEach,还有一种就是afterEach，两者传参上有一些区别,也就是afterEach钩子函数不用传next()函数;一般情况下beforeEach的回调有三个传参,

• 第一个是to()，表示router即将进入的路由对象;
• 第二个是from()，表示导航即将离开的路由
• 第三个是next()，进行管道中的一个钩子，如果执行完了，则导航的状态就是 confirmed （确认的）；否则为false，终止导航。 

当然我们也可以为单个路由设置独享的钩子,使用beforeEnter，beforLeave实现,示例如下:

{
    path: '/dashboard',
    component: resolve => require(['../components/page/Dashboard.vue'], resolve),
    meta: { title: '系统首页' },
    beforeEnter: (to, from, next) => {

    },
    beforeLeave: (to, from, next) => {

    }

},

 

还可以设置组件路由,主要包括 beforeRouteEnter和beforeRouteUpdate ,beforeRouteLeave,这几个钩子都是写在组件里面也可以传三个参数(to,from,next),作用与前面类似. 

 

beforeRouteLeave(to, from, next) {
// ....
next()
},
beforeRouteEnter(to, from, next) {
// ....
next()
},
beforeRouteUpdate(to, from, next) {
// ....
next()
},
computed: {},
method: {}

• axios请求拦截和响应拦截

1.请求拦截

请求拦截器的作用是在请求发送前进行一些操作，例如在每个请求体里加上token，统一做了处理如果以后要改也非常容易。

axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么，例如加入token
    .......
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

 2.响应拦截

响应拦截器的作用是在接收到响应后进行一些操作，例如在服务器返回登录状态失效，需要重新登录的时候，跳转到登录页 

axios.interceptors.response.use(function (response) {
    // 在接收响应做些什么，例如跳转到登录页
    ......
    return response;
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  });

3.清除拦截 

var myInterceptor = axios.interceptors.request.use(function () {/*...*/});
axios.interceptors.request.eject(myInterceptor);