使用elementuiadmin去掉默认mock权限控制的设置

这篇文章主要介绍了使用elementuiadmin去掉默认mock权限控制的设置方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

elementuiadmin去掉默认mock权限控制的设置

一般前后端分离的项目，前端都很少通过mock模拟数据来调用测试，因为后期api出来后，可能还得修改结构，颇为麻烦。

本文从实践中总结，完全去掉默认的mock控制。

1.找到vue.config.js文件，去掉mock的加载

devServer: {     port: port,     open: true,     overlay: {         warnings: false,         errors: true     }     // before: require('./mock/mock-server.js') // 注释掉这一行 }

2.找到main.js，注释掉相关mock

// if (process.env.NODE_ENV === 'production') { //  const { mockXHR } = require('../mock') //  mockXHR() // }

3.login.vue登录页面，直接调用api/user.js下的方法。

先引用login和reg进来，否则用默认的登录接口会再调用用户详情接口

import { login, reg } from '@/api/user'

把原来的登录方法注释掉，直接调用成功后，把登录token值set到js-cookie里

handleLogin() {       this.$refs.loginForm.validate(valid => {         if (valid) {           this.loading = true           login(this.loginForm).then((res) => {             if (res && res.code === 0 && res.data && res.data.token) {               setToken(res.data.token)               this.$router.push({ path: this.redirect || '/', query: this.otherQuery })               this.loading = false             }           }).catch(() => {             this.loading = false           })           // this.$store.dispatch('user/login', this.loginForm)           //   .then(() => {           //     this.$router.push({ path: this.redirect || '/', query: this.otherQuery })           //     this.loading = false           //   })           //   .catch(() => {           //     this.loading = false           //   })         } else {           console.log('error submit!!')           return false         }       })     },

4.登录后就是菜单的展示问题了，找到/layout/components/Sidebar/index.vue文件，去掉权限控制permission_routes参数，改为：

   import routesArr from '@/router/index' export default {   components: { SidebarItem, Logo, routesArr },   computed: {     getRouterList() {       return routesArr.options.routes     },     ...mapGetters([       // 'permission_routes', // 注释掉       'sidebar'     ]),

OK！完美！

vue-elementui-admin的动态权限控制

最近打算仔细的学习一下vue-elemnetui-admin的代码，一是工作需要用到，需要加工一些东西，还有一个就是打算之后好好学习vue，看看源码啥的，所以先从这个框架学起来。

都是一些自己的学习笔记，做一些记录，有不对的地方恳请大家指出，可以一起讨论。

学习了一下permission文件夹下的role.js,用来控制不同用户能够查看菜单的权限

目录

elementuiadmin去掉默认mock权限控制的设置

vue-elementui-admin的动态权限控制