网页版游戏网站,wordpress标签有问题,书店网站怎么做,做网站生意多吗为什么要动态路由绑定
因为,如果我们的导航栏没有这个权限,输入对应网址,一样可以获取对应的页面,为了解决这个问题,有两种解决方案,一种是动态路由绑定(导航有多少个,就有多少个路由,在路由修改之前,先进行一个导航路由的加载和路由的动态绑定,然后看是否有这个路由,有就跳转…为什么要动态路由绑定
因为,如果我们的导航栏没有这个权限,输入对应网址,一样可以获取对应的页面,为了解决这个问题,有两种解决方案,一种是动态路由绑定(导航有多少个,就有多少个路由,在路由修改之前,先进行一个导航路由的加载和路由的动态绑定,然后看是否有这个路由,有就跳转),一种是权限的校验(路由修改之前,进行一个拦截,对用户的权限进行一个校验),这两种方法都可以在路由页面里,使用beforeEach来进行操作,这里是动态路由绑定
思路
将这个用户的能显示显示的导航栏对应的路由,和我们的路由配置进行一个绑定和校验,这样的话,如果说没有这个用户对应的路由,那么就无法跳转到对应的页面
步骤(1-3步是准备步骤)
1.使用mock.js返回对应的菜单栏和用户权限
因为还没写后端,所以使用mock.js来模拟一下
Mock.mock(/sys/menu/nav, get, () {let nav [{name: SysManga,title: 系统管理,icon: el-icon-s-operation,component: ,path: ,children: [{name: SysUser,title: 用户管理,icon: el-icon-s-custom,component: sys/User,path: /sys/user,children: []}]},{name: SysTools,title: 系统工具,icon: el-icon-s-tools,path: ,component: ,children: [{name: SysDict,title: 数字字典,icon: el-icon-s-order,path: /sys/dicts,component: sys/Dict,children: []},]},]let authoritys [];Result.data {nav: nav,authoritys: authoritys}return Result;
});
2.在store里面写一个menu.js的页
将我们需要再其他页面使用的变量和方法写入
import Vue from vue
import Vuex from vuexVue.use(Vuex)export default {state: {menuList: [],authoritys: [],validation: false,},getters: {},mutations: {// 菜单列表setMenuList(state, menu) {state.menuList menu},// 权限列表setPermList(state, perms) {state.authoritys perms},setValidation(state, validation) {state.validation validation;}},modules: {},actions: {},
}3.给对应的页面插入对应的元素
templateel-menuclassel-menu-vertical-demobackground-color#545c64text-color#fffactive-text-color#ffd04bselecthandleSelect!-- 首页菜单项 --el-menu-item indexIndextemplate #titlei classel-icon-s-home/i首页/template/el-menu-item!-- 系统管理子菜单 --el-submenu :indexmenu.name v-formenu in menuList :keymenu.nametemplate #titlei :classmenu.icon/ispan{{ menu.title }}/span/template!-- 用户管理子菜单 --el-menu-itemv-foritem in menu.children:keyitem.name:indexitem.pathtemplate #titlei :classitem.icon/ispan{{ item.title }}/span/template/el-menu-item/el-submenu/el-menu
/templatescript
export default {name: SideMenu,data() {return {}},computed: {menuList: {get() {return this.$store.state.menu.menuList},}},methods: {handleSelect(index) {this.$router.push(index);},}
}
/scriptstyle scoped
.el-menu-vertical-demo {flex: 1; /* 菜单项占据 el-aside 的剩余空间 */overflow-y: auto; /* 如果内容过多显示滚动条 */width: 200px;
}
/style4.在路由页面写入beforeEach方法(有注释的)
思路:
1.在路由改变时发一个请求,拿到对应的菜单栏和权限
2.动态绑定路由
2.1 因为这里是子路由,所以先遍历,排除没有子路由的路由
2.2 再遍历子路由,看有没有component(具体的页面),排除没有的
2.3 将有component的对象里的元素封装为一个主路由(我这里主路由名为Home)的子路由
2.4 但是现在有个问题,每次路由修改之后我都要发请求,浪费,所以,在store中的页面里定义一个布尔类型的validation,给个默认值false,当请求完成,修改为true,下次就不会发请求,节约性能
router.beforeEach((to, from, next) {const validation store.state.menu.validation;if (!validation) {axios.get(/sys/menu/nav, {headers: {Authorization: localStorage.getItem(token),}}).then(res {// 拿到 menuListstore.commit(setMenuList, res.data.data.nav);// 拿到用户权限store.commit(setPermList, res.data.data.permList);// 动态绑定路由store.state.menu.menuList.forEach(item {if (item.children) {item.children.forEach(e {if (e.component) {router.addRoute(Home, {path: e.path,name: e.name,component: () import(/views/${e.component}),});}});}});// 更新 validation 状态console.log(123456)store.commit(setValidation, true);// 确保在异步操作完成后继续导航next({path: to.fullPath});}).catch(error {console.error(Error fetching menu:, error);// 处理请求失败的情况例如重定向到登录页面next(/login);});} else {// 如果已经验证过直接继续导航next();}
});
