vue项目记录（一）路由配置

vue项目记录（一）路由配置

---

提示：主要是动态路由的配置

---

前言

利用路由守卫进行登录验证、token是否有效验证

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、路由守卫是什么？

示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。

二、详细代码

1.分别建立公共路由表和动态路由表

路由中定义两个路由表，一个为公共路由表，一个为动态路由表
公共路由表：不需要权限也能去访问，
动态路由表：需要权限去获取，可以存放在数组中，通过foreach循环遍历，添加到父路由中

RoutersConfig.forEach(item=>{
  router.addRoute("mainbox",item)
})

2.路由守卫拦截

代码如下（示例）：

router.beforeEach((to,from,next)=>{
  if(to.name == 'login'){
    next()
  }else{
    //如果授权，next;未登录就重定向到login
    if(!localStorage.getItem("token")){
      next({
        path:"/login"
      })
    }else{
      //小心死循环,只有第一次添加路由
      //store中isGetterRouter初始值为false
      if(!store.state.isGetterRouter){
        //删除所有嵌套路由，防止上一次是管理员登录，下一次编辑登录可通过网址访问没有权限的界面
        router.removeRoute("mainbox")
        ConfigRouter()
          next({
          //ConfigRouter)()配置好了路由但还没开始生效，需要配置路径
            path:to.fullPath
        })
      }else{
        next();
      }
    }
  }
})

//登录后才能看，需做路由拦截
const ConfigRouter = ()=>{
  if(!router.hasRoute("mainbox")){
    router.addRoute({
      path:"/mainbox",
      name:'mainbox',
      component:MainBox
    })}
  RoutersConfig.forEach(item=>{
 	 router.addRoute("mainbox",item)
  })
  //第一次进去路由结束
  store.commit("changeGetterRouter",true)
}

---

三、路由角色访问权限控制

定义了一个 v-admin指令

const vAdmin ={
    mounted(el){
        if(store.state.userInfo.role!==1){
        //在界面中看不到
            el.parentNode.removeChild(el)
        }
    }
}

在路由中访问不了，如果为管理员权限才添加这个路由

const ConfigRouter = ()=>{
  if(!router.hasRoute("mainbox")){
    router.addRoute({
      path:"/mainbox",
      name:'mainbox',
      component:MainBox
    })}
  RoutersConfig.forEach(item=>{
  checkPermission(item)  && router.addRoute("mainbox",item)
  })
  //第一次进去路由结束
  store.commit("changeGetterRouter",true)
}

const checkPermission = (item)=>{
  if(item.requireAdmin){
    return store.state.userInfo.role == 1 //1为管理员，2为编辑
  }
  return true
}

四、404页面

	{
        path:"/:pathMatch(.*)*",
        name:"NotFound",
        component: () => import('../views/NotFound/NotFound.vue')
    }