iView Vue框架整合后台权限管理

iView Vue框架整合后台权限管理

iView管理后台框架框架地址：https://github.com/iview/iview-admin ,这是iView提供的管理后台模板和vue-cli脚手架搭建的目录有些许不同，但不影响使用，首先找到build目录下的webpack.dev.config.js配置下proxyTable，因为调用后台接口涉及到跨域问题，所以先设置下’/api’访问的是localhost:8090端口
2. 在webpack.dev.config.js配置proxyTable跨域代理，保证可以访问到后台接口
3. modules中的app.js中的updateMenuList是加载整个目录的地方，在这里可以设置后台返回菜单列表然后放入menuList
4. 在login.vue中调用登录方法然后将用户名和角色ID放入Cookie中
5. 在路由器文件夹中的index.js中router.beforeEach方法是拦截所有的路径，在这里判断是否登录，如果登录了则去调用后台请求判断这个路径是否需要判断权限并是否有权限访问，如果没有权限则是跳转到403页面
6. 在Menu.vue中可以看到菜单是加载到shrinkable-menu组件中，然后查询iview可知Menu组件的on-select事件返回的是路由的值而不是路径
所以在此点击进入一直到sidebarMenu.vue组件中找到on-select方法，然后一番寻找后发现Menu返回的组件的名称是由MenuItem组件传递的返回的则是MenuItem组件绑定的:name属性，所以将MenuItem的name属性改为child.path，然后将changeMenu方法重写，现在的方法为this.$emit{(}^{\prime }on-chang{e}^{\prime },active);但是返回的是名称所以现在可以使用重定向到返回路径的页面使用this.$router.push(active)，便可以重定向到新的页面