VUE 动态路由

因公司业务的发展，需要做一款新的产品，该产品分为：用户端和后台管理。我负责后台管理系统的开发。在看了UI的设计图后，又因为产品的周期较短，所以，我果断采用了vue-element-admin 来快速的搭建后台管理系统。这里我主要说下在这个过程中用到的动态路由，简单的总结下。

vue-element-admin 本身的动态路由 (个人的理解)

登录成功后获取token，根据 token 来获取用户信息和权限

const { roles } = await store.dispatch('user/getInfo')
// generate accessible routes map based on roles
const accessRoutes = await store.dispatch('permission/generateRoutes', roles)

事先把不需要权限都能访问的路由和需要权限访问的路由都分配好后，在permission文件中导入
```
import { asyncRoutes, constantRoutes } from '@/router'
```

再调用 action 里的 generateRoutes 方法来根据用户的权限对路由进行不同的处理，并存储在state中

generateRoutes({ commit }, roles) {
  return new Promise(resolve => {
    let accessedRoutes
    if (roles.includes('admin')) {
      accessedRoutes = asyncRoutes || []
    } else {
      accessedRoutes = filterAsyncRoutes(asyncRoutes, roles)
    }
    commit('SET_ROUTES', accessedRoutes)
    resolve(accessedRoutes)
  })
}

export function filterAsyncRoutes(routes, roles) {
  const res = []

  routes.forEach(route => {
    const tmp = { ...route }
    if (hasPermission(roles, tmp)) {
      if (tmp.children) {
        tmp.children = filterAsyncRoutes(tmp.children, roles)
      }
      res.push(tmp)
    }
  })

  return res
}

function hasPermission(roles, route) {
  if (route.meta && route.meta.roles) {
    return roles.some(role => {
      return route.meta.roles.includes(role)
    })
  } else {
    return true
  }
}

将生成的路由通过addRoutes动态添加进去
```
router.addRoutes(accessRoutes)
```

将state中的路由通过getters暴露出去，并生成侧边栏

permission_routes: state => state.permission.routes,

<el-scrollbar wrap-class="scrollbar-wrapper">
  <el-menu
    :default-active="activeMenu"
    :collapse="isCollapse"
    :background-color="variables.menuBg"
    :text-color="variables.menuText"
    :unique-opened="false"
    :active-text-color="variables.menuActiveText"
    :collapse-transition="false"
    mode="vertical"
  >
    <sidebar-item v-for="route in permission_routes" :key="route.path" :item="route" :base-path="route.path" />
  </el-menu>
</el-scrollbar>

我自己在此基础上改动的动态路由

因为上述的动态是动态获取用户的权限来生成对应的路由的，登录成功后生成的路由不会在切换页面时发生改变。这和我们交互需求不符合，而且我们后端的登录接口，是一下将用户的token和用户的信息都返回了，并且没有用户的权限，也就是说我们的用户所有页面都是可以访问的。

我的思路

我将所有的路由都分配成了可访问的同步路由，没有异步路由
并将所有的页面 (除登录、404页面)，都在meta中添加了roles，并根据需求为每个页面添加对应的权限属性值。
在 permission 中定义了一个变量来表示路由状态，并定义对应的修改方法，最后将变量暴露出去，并将状态存储到了 sessionStorage 中
```
routerstatus: sessionStorage.getItem('ifrouter') || false
```

在渲染侧边栏的时候监听该值的变化，定义 setTimeout 的原因是当该值发生变化后，发现侧边栏不动态改变，而试了this.$forceUpdate()没有用，就采用这个方法

watch: {
  routerstatus(newv, oldv) {
    if (newv) {
      this.ifRouter(this.transferarr)
    } else {
      this.ifRouter(this.outsidearr)
    }
    sessionStorage.setItem('ifrouter', newv)
    this.isshow = false
    const timer = setTimeout(() => {
      this.isshow = true
      clearTimeout(timer)
    }, 500)
  }
},
<!-- 这里的代码和我上述的思路有一定的出入，后续优化掉，更新掉 -->
ifRouter(routerarr) {
  const temp_route_arr = this.$router.options.routes
  for (let i = 0; i < temp_route_arr.length; i++) {
    if (temp_route_arr[i].children && routerarr.includes(temp_route_arr[i].children[0].name)) {
      temp_route_arr[i].hidden = false
    }
    if (temp_route_arr[i].children && !routerarr.includes(temp_route_arr[i].children[0].name)) {
      temp_route_arr[i].hidden = true
    }
  }
}
<!-- 这里是稍作优化后的代码，随后有优化，会及时的更新 -->
ifRouter(control) {
  const temp_route_arr = this.$router.options.routes
  for (let i = 0; i < temp_route_arr.length; i++) {
    if (temp_route_arr[i].meta && temp_route_arr[i].meta.roles.includes(control)) {
      temp_route_arr[i].hidden = false
    } else {
      temp_route_arr[i].hidden = true
    }
  }
}

这样通过动态的改变某个页面路由的 hidden 属性，来显示或隐藏页面，可以实现在切换页面时来动态改变侧边栏

有想法的欢迎留言，一起学习成长