基于vue的后台系统模块化开发——权限控制现代化开发后台系统——权限控制前言项目搭建好后，我们开始码字啦！非常抱歉耽误了，最近遇到了很多麻烦，现在终于有点空闲了！在写这个权限控制的时候，我想了很久。我不知道如何开始更好地表达它。感觉代码有点绕。可能我对Vue不是很熟悉。开篇已经说过，本项目为实践项目，有不足之处欢迎指出。先看看效果图，看看是不是你想要的。假设后台界面是这样的，这里值得注意的是：未登录时，本项目的控制逻辑只能显示登录页面，进入其他链接不会跳转！效果如下：个人理解，逻辑是登录后根据用户信息知道对应的权限，其实就是控制用户对应的路由，显示在界面上。比如上图：1.假设admin是超级管理员，那么获取到所有路由，界面显示（概览、组件、权限）2.normal是普通管理员，只能看到部分，以及界面显示（Overview,components）的大体逻辑是这样的。在获得权限之前，你必须先登录，否则你怎么知道你是谁？你能做什么如果登录只追求功能实现，你可以先随意创建两个输入框并添加一个确定按钮，并为确定按钮绑定点击事件。有强迫症，还是美化一下，然后在提交前进行表单验证，效果如下：（账号随机生成）验证完成，实现登录后，我们保存用户信息.获取用户信息this.$http.post('/login',_data).then((response)=>{//保存用户信息(StoreUser/setUser)this.$store.dispatch('StoreUser/setUser',response.data).then(()=>{});});登录成功后，服务器会返回客户的信息。使用VUEX状态管理工具，首先保存一个用户的状态信息，因为可能在很多地方都会用到这些信息，比如个人中心等页面。conststate={'isLogin':false};constmutations={'SET_USER':function(state,userData){state=_.assign(state,userData);Cookie.set('accountData',state);},'REMOVE_USER':function(state){state=_.assign(state,{'isLogin':false});Cookie.remove('accountData');}};constactions={'setUser':function({commit},userData){commit('SET_USER',userData);},'removeUser':function({commit}){commit('REMOVE_USER');}};并将此用户信息保存在Cookie中进行会话处理，以便下次打开或刷新页面时记住用户的登录状态。这里使用了js-cookie工具。生成权限路由表获取用户信息，然后就可以知道用户的权限范围，然后我们根据这个权限生成对应的路由表。this.$store.dispatch('StoreAddRoutes/getRoutes',_roles).then(()=>{//根据_roles权限生成可访问路由表//动态添加可访问路由表this.$router.addRoutes(this.$store.getters.addRoutes);//黑科技window.location.replace('/');});StoreAddRoutes/getRoutes方法怎么样？conststate={'addRoutes':[]};constactions={'getRoutes':function({commit},roles){if(_.indexOf(roles,'admin')!==-1){commit('SET_ROUTERS',adminRoutes());}else{commit('SET_ROUTERS',normalRoues());}}};StoreAddRoutes/getRoutes返回的路由信息??this.$store.getters.addRoutes，主要使用vue2。2.0之后增加了router.addRoutes方法进行动态添加。注意addRoutes()方法添加了一个数组！重点是这句话：this.$router.addRoutes(this.$store.getters.addRoutes);在actions中，我们按照权限划分了adminRoutes和normalRoutes两个路由表，分别对应超级管理员和普通路人。从上面得到整体的路由表，可以看出有两张路由表是权限分开的，那么这两个adminRoutes和normalRoutes是怎么来的呢？/***[AdminRouter超级管理员]*@type{Array}*/exportfunctionadminRoutes(){layoutObj.children=layoutObj.children.concat([RoleRouter]);return[commonRoutes(),layoutObj];}/***[NormalRouercommonuser]*@type{Array}*/exportfunctionnormalRoues(){return[commonRoutes(),layoutObj];}其中commonRoutes()是公共的页面，比如login，404等/***publicroute*@type{Array}*/exportfunctioncommonRoutes(){returnLoginRouter;}而layoutObj是整个布局信息，包括：侧边栏SideBar，右侧帮助Help,底部页脚和中间内容ComtainerimportLoginRouterfrom'@/pages/login/router.js';从“@/pages/home/router.js”导入HomeRouter；从“@/pages/role/router.js”导入RoleRouter；从“@/pages/module/router.js”导入ModuleRouter；constContainer=resolve=>require(['@/components/layout/layout'],resolve);constSideBar=resolve=>require(['@/components/layout/sidebar'],resolve);const帮助=resolve=>require(['@/components/layout/help'],resolve);constFooter=resolve=>require(['@/components/layout/footer'],resolve);letlayoutObj={'路径':'/','name':'layout','components':{'default':Container,'sidebar':SideBar,'help':Help,'appFooter':Footer},'redirect':'/index','children':[HomeRouter,ModuleRouter]};读取整个路由表的信息后，就很容易通过不同的权限放置不同的页面路由，从而实现权限控制。注意到我上面提到的黑科技了吗？动态添加路由表后，跳转到页面首页。而不是使用this.$router.push()方法跳转？因为如果你用这种方法，你会一直被警告有重复的路由。看了源码，大概是因为addRoutes()这个方法。该框架没有提供删除路由的方法。添加它们会一直存在于浏览器中，所以要用黑科技，刷新页面。//黑科技window.location.replace('/');路由拦截router.beforeEach((to,from,next)=>{if(Cookie.getJSON('accountData')&&Cookie.getJSON('accountData').isLogin){//判断是否有cookienext();//当有用户权限时，表示已经生成了所有可访问的路由，如果未授权访问，则自动进入登录页面}elseif(to.path==='/login'){next();}else{next('/login');//当有用户权限时，表示已经生成了所有可访问的路由，如果未授权访问，则自动进入404页面}});拦截器就是防止用户直接输入地址跳转，因为你没有登录，怎么可能让你访问！！当cookie中有用户信息时，表示处于登录状态，可以正常访问。如果不在登录状态，则只能跳转到登录状态。文章项目效果预览地址项目开源代码基于vue模块化开发后台系统-基于vue模块化开发后台系统的准备工作-基于vue模块化开发后台系统搭建项目-权限控制
