大家好,欢迎来到IT知识分享网。
因公司业务的发展,需要做一款新的产品,该产品分为:用户端和后台管理。我负责后台管理系统的开发。在看了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
属性,来显示或隐藏页面,可以实现在切换页面时来动态改变侧边栏
-
有想法的欢迎留言,一起学习成长
免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://yundeesoft.com/28130.html