欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-04-12 09:53:31
...
  • 路由导航卫士

所谓路由导航卫士即是通过一定的条件对路由进行控制,比如通过判断是否存在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);

 

相关标签: VUE