vue动态路由学习

1.所有路由配置都在router的js文件中进行

// 引入接口文件
import constant from "../config/constant.js"
// 处理接口数据的函数
function getMenuRoutes(menuData) {
  const routes = []
  menuData.forEach(menu => {
    const route = {
      path: menu.path,
      name: menu.name,
      component: getMenuComponent(menu.component),
      meta: {
        requireAuth: true,
        title: menu.meta.title,
        buttonPermissions: menu.meta.buttonPermissions
      },
      // children: getMenuRoutes(menu.children)
    }
    routes.push(route)
  })
  return routes
}

// 获取菜单组件的函数
function getMenuComponent(component) {
  return () => import(`@/views/${component}.vue`)
}
// 获取菜单组件的函数
function getMenuComponent(component) {
  return () => import(`@/views/${component}.vue`)
}
// vue-router路由版本更新产生的问题,导致路由跳转失败抛出该错误开始
const originalPush = Router.prototype.push
Router.prototype.push = function push(location, onResolve, onReject) {
  if (onResolve || onReject) {
    return originalPush.call(this, location, onResolve, onReject)
  }
  return originalPush.call(this, location).catch(err => err)
}
// vue-router路由版本更新产生的问题,导致路由跳转失败抛出该错误结束

export default router;
import global from '../common/global.js'
// 记录路由
let hasRoles = true
// 白名单(不需要登录就可以访问的名单)
const whiteList = ['/login', '/ForgetPwdOne', '/ForgetPwdTwo', '/ForgetPwdThree', 'BasicInformation', 'ChangePassword']
router.beforeEach(async (to, from, next) => {
  //获取token
  let token = localStorage.getItem('token')
  //判断是否登录
  if (token) {
    //如果等录还去登录页，直接返回首页
    if (to.path === '/login') {
      next({
        path: '/'
      })
    } else {
      // 发送接口请求，获取动态路由数据
      axios.get(constant.loadurl.getRouterMenuList, {
        params: {
          token: localStorage.getItem("token"),
          userId: localStorage.getItem("uid")
        }
      }).then(response => {
        const menuData = response.data.data;
        console.log("menuData", menuData);
        // 处理接口数据，将数据转换为路由配置需要的格式
        const dynamicRoutes = getMenuRoutes(menuData)
        let routerFormat = [{
          path: '/main',
          name: 'main',
          component: resolve => require(['@/views/main.vue'], resolve),
          meta: {
            requireAuth: true, // 添加该字段，表示进入这个路由是需要登录的
            title: '首页',
            buttonPermissions: '',
          },
          children: []
        }]
        routerFormat[0].children = dynamicRoutes;
        // 动态添加路由
        router.addRoutes(routerFormat)

      })
      // //调用获取信息的action，重新获取动态路由
      // await store.dispatch('addroutes',JSON.parse(localStorage.getItem('menus')));
      //拿到动态添加的路由
      let routes = store.state.menus
      if (hasRoles) {
        //重新添加动态路由
        router.addRoutes(routes)
        hasRoles = false
        next({
          ...to,
          replace: true
        })
      } else {
        next()
      }
    }
  } else {
    //如果没有登录，如果要去登录页，直接放行
    if (whiteList.includes(to.path)) {
      next()
    } else {
      next(`/login`)
    }
  }

})


// 请求超时时间
axios.defaults.timeout = 120000;
// http请求拦截
axios.interceptors.request.use(config => {
  return config;
}, error => {
  // 对请求错误做些什么
  Vue.prototype.$message.error('请求超时')
  return Promise.reject(error)
});
// http响应拦截
axios.interceptors.response.use(response => {
  // res是响应的结果
  switch (response.data.code) {
    case 0: //正常
      // 复位token无效标记置
      global.TokenInvalidFlag = 0;
      global.LongTimeNotDoFlag == 0;
      break;
    case 1001:
      // 用户登录状态无效，请重新登录
      // 响应成功的拦截
      localStorage.removeItem('Authorization')
      localStorage.clear(); //删除用户信息
      if (global.TokenInvalidFlag == 0) {
        Vue.prototype.$message.error(response.data.msg)
      }
      global.TokenInvalidFlag = 1;
      router.push({
        name: 'login',
      })
      break;
    case 1002:
      // 您的账号已在别处登录，您已被强制下线。
      // 响应成功的拦截
      localStorage.removeItem('Authorization')
      localStorage.clear(); //删除用户信息
      if (global.TokenInvalidFlag == 0) {
        Vue.prototype.$message.error(response.data.msg)
      }
      global.TokenInvalidFlag = 1;
      router.push({
        name: 'login',
      })
      break;
    case 1003:
      // 长时间未操作
      // 响应成功的拦截
      localStorage.removeItem('Authorization')
      localStorage.clear(); //删除用户信息
      if (global.LongTimeNotDoFlag == 0) {
        Vue.prototype.$message.error(response.data.msg)
      }
      global.LongTimeNotDoFlag = 1;
      router.push({
        name: 'login',
      })
      break;
    default:
      return response;
  }
  return response
}, error => {
  console.log('err', error);
  // Vue.prototype.$message.error(error.toString())
  if (error.response.data.msg) {
    Vue.prototype.$message.error(err.response.data.msg)
    return Promise.reject(error.response.data.msg) // 返回接口返回的错误信息
  } else {
    // 返回状态码不为200时候的错误处理
    Vue.prototype.$message.error(error.toString())
    return Promise.resolve(error)
  }
});