zoukankan      html  css  js  c++  java
  • vue axios拦截跳转

    第一步:添加需要拦截的页面

    {
        path: '/control',
        name: 'Control',
        meta: {
          requireAuth: true
        },
    

      

    第二步:页面拦截

    router.beforeEach((to, from, next) => {
      if (to.meta.requireAuth) { // 判断该路由是否需要登录权限
        if (!(Object.keys(store.state.userInfo).length === 0)) { // 通过vuex state获取当前的token是否存在
          iView.LoadingBar.start()
          next()
        } else {
          next({
            path: '/login',
            query: {
              redirect: to.fullPath
            } // 将跳转的路由path作为参数,登录成功后跳转到该路由
          })
        }
      } else {
        iView.LoadingBar.start()
        next()
      }
    })
    

      

     第三步:后台返回拦截

    if (res.data.code !== 0) {
          Message.info(res.data.msg)
        }
        if (res.data.code === 401) {
          router.replace({
            path: 'login',
            query: {
              redirect: router.currentRoute.path
            }
          })
          Message.info('已掉线,请重新登录')
        }
    

      拦截全部做完,祝你好运!!!

    {
        path: '/control',
        name: 'Control',
        meta: {
          requireAuth: true
        },
  • 相关阅读:
    4组Beta冲刺1/5
    4组Beta冲刺总结
    4组Beta冲刺2/5
    4组Beta冲刺4/5
    4组Beta冲刺5/5
    4组Alpha冲刺6/6
    软工实践个人总结
    4组Alpha冲刺6/6
    4组Beta冲刺3/5
    4组Alpha冲刺总结
  • 原文地址:https://www.cnblogs.com/matd/p/11572805.html
Copyright © 2011-2022 走看看