怎么上传网站地图,做网站手机端如何更新,网站建设在实际工作中的意义,百度高级检索入口一般来说#xff0c;在#xff08;后台#xff09;管理系统#xff08;最早的企业级的项目和网站的后台管理系统现在大部分人都叫后台管理系统#xff09;中才会有权限之说。权限分为功能级权限和数据级权限。这篇文章主要谈论功能级权限。一、名词解释#xff1a;权限的…一般来说在后台管理系统最早的企业级的项目和网站的后台管理系统现在大部分人都叫后台管理系统中才会有权限之说。权限分为功能级权限和数据级权限。这篇文章主要谈论功能级权限。一、名词解释权限的意思不用再做解释。功能级权限表示不同的角色或者用户进入系统后看到的功能不一样或者说可以操作的功能不一样。有的系统的处理思路是不能操作的功能就根本不会让你看到有的系统的处理思路是你可以看见所有的功能但是有些功能的页面根本看不见操作不成。当然我个人认为前者更好。例如HIS系统里医生可以开处方。护士就不可以。数据级权限表示你可以进入某个功能。但是1、不一定能够看到所有的数据2、对看到的数据不一定能够进行增删改查的操作。例如0A系统中你只能看到自己的考勤数据而且不能添加、修改和删除。但是人事小姐姐可以看到所有人的考勤数据而且还可以做修改等操作。二、后台管理系统的功能级权限处理思路1没有前端的时代前端的人如果看不懂可以略过此部分没有前端的时代可以认为是全栈时代。那时候程序员要完成前后端的所有功能。虽说是富客户端前端但是比起现在前端流行的时代那是小巫见大巫了。所以都是有后端的程序来处理权限的。后端程序结合数据库来处理权限的。思路 1需要在数据库中建表一般包括功能表存储着管理系统的所有功能角色表存储着整个项目的角色其实就是公司中的角色如总经理、市场部经理、市场专员、项目经理、程序员等等。角色与功能的对应表这表示的是什么样的角色具备什么样的功能。用户表可以登录管理系统的所有用户用户表里会存储所属角色。这样的话用户和功能之间就有了关系2后端程序根据登录的用户名沿着 用户名---角色---功能 这样的步骤取到该用户对应的功能。然后把这些功能显示在导航栏的区域就行这也就是用户登录后只能看到自己具备的功能的思路。2前端盛行的当下当下前后端分离。所以权限可以由后端处理也可以由前端处理。1、后端处理权限的思路登录功能--输入用户名和密码--前端发送用户名和密码--后端接收到用户名和密码--找数据库(验证用户名和密码)--验证通过时--找数据库用户名---角色---功能--获取到该用户的功能--发送给前端--前端根据获取到的功能循环显示出该功能。2、前端处理权限的思路不推荐 首先需要把权限保存在前端这样会写死。所以不推荐。以下是思路登录功能--输入用户名和密码--前端发送用户名和密码--后端接收到用户名和密码--找数据库(验证用户名和密码)--验证通过时--返回前端同时返回角色--前端根据角色对应的功能权限展示对应的功能。三、使用vue完成后台管理系统的功能级权限 此处还是以“后端处理权限的思路”前端仅作功能权限的展示为例进行描述。 使用vue-router的addRoutes来动态改变路由配置。1、步骤1、默认路由配置里只有登录的配置。import Vue from vue;
import VueRouter from vue-router;
import Login from /pages/Login;
Vue.use(VueRouter); //把vue-router安装到Vue。
// 创建vue-router对象
let router new VueRouter({mode: hash, //路由模式routes: [{path: /,redirect: /Login},{path: /Login,component: Login}]
});export default router;
2、登录成功后后端返回功能权限最好直接就是路由配置如果不是前端把功能权限处理成路由配置的json数组格式。使用vue-router对象的addRoutes方法把该路由配置动态添加到路由对象里。同时把该路由配置保存到sessionStorage里防止前端刷新后丢失路由配置。axios({url: /roles,method: get,params: {username: this.username,userpass: this.userpass}
}).then(res {let roles res.data[0].data;//this.allRoutes是所有的路由配置可以放在vueX中以下代码是根据后端返回的权限产生该用户对应的路由配置let currRoutes this.allRoutes.filter(item {return roles.some(obj obj.path item.path);});//把获取到的权限保存到sessionStorage中sessionStorage.setItem(roles, JSON.stringify(roles));//把获取到的权限动态增加到vue-Router对象里this.$router.addRoutes(currRoutes);this.$router.push(/Home);
});
3、前端在“App.vue”里的created里需要读取cookie里或sessionStorage里保存的路由配置同样需要把读取到的路由配置使用vue-router对象的addRoutes方法把该路由配置动态添加到路由对象里。这样刷新页面时就可以在此处获取到当前用户的路由权限。created() {this.roles JSON.parse(sessionStorage.getItem(roles));if (this.roles) {//this.allRoutes是所有的路由配置可以放在vueX中以下代码是根据后端返回的权限产生该用户对应的路由配置let currRoutes this.allRoutes.filter(item {return this.roles.some(obj obj.path item.path);});this.$router.addRoutes(currRoutes);}
}
2、特别注意一定要把获取到的权限数组存放到sessionStorage。否则刷新页面时路由配置就会丢失掉。以上步骤是经过测试通过的。下面是全部代码网盘链接链接https://pan.baidu.com/s/1ShL9jADEzEIBuCiYBtEoSw提取码tfxr千锋HTML5学院如何讲清楚函数防抖zhuanlan.zhihu.com千锋HTML5学院如何讲清楚函数节流zhuanlan.zhihu.com千锋HTML5学院如何讲清楚闭包zhuanlan.zhihu.com
