前端权限实现
工具:egg.js,vue;
服务端:编写router表及user表
user.js :
module.exports = [ { id:1, names:‘zhangsan‘, auth:[2,3,6,7] }, { id:2, names:‘lisi‘, auth:[2,3,5,6,7,8] }, { id:3, names:‘wangwu‘, auth:[2,3,4,5,6,7,8] } ]
router.js:
module.exports=[ { id:2, pid:0, path:‘/course‘, name:‘Course‘, title:‘课程管理‘ }, { id:3, //父级为2 pid:2, path:‘operate‘, name:‘CourseOperate‘, title:‘课程操作‘, link:‘/course/operate‘ }, { id:4, // 父级为3 pid:3, path:‘info_data‘, name:‘CourseInfoData‘, title:‘课程数据‘, link:‘/course/operate/info_data‘ }, { id:5, //父级为2 pid:2, path:‘add‘, name:‘CourseAdd‘, title:‘增加课程‘, link:‘/course/add‘ }, { //这里是一级 id:6, pid:0, path:‘/student‘, name:‘student‘, title:‘学生管理‘ }, { //父级为id为6的值 id:7, pid:6, path:‘operate‘, name:‘StudentOperate‘, link:‘/student/operate‘, title:‘学生操作‘ }, { id:8, pid:6, path:‘add‘, name:‘StudentAdd‘, link:‘/student/add‘, title:‘增加学生‘ }, ]
父级id为0,表示为一级路由;其他为子路由;
定义service 处理前端传递参数并返回对应权限路由
/service/user.js
const rou = require(‘../../data/router‘) const users = require(‘../../data/user‘) module.exports = app => { class UserService extends app.Service { getRoute(val){ if (val) {
//得到前端传递id const autherInfo = []
//根据传递id过滤得到的所对应的userinfo let userinfo = users.filter(item=>{ return item.id == val })[0] console.log(userinfo); userinfo.auth.map(rid=>{
//根据anth得到的数据循环得到router.js所对应的id值 rou.map(rout=>{ if (rid == rout.id) { autherInfo.push(rout) } }) }) return autherInfo } } }
//将所得值返回 return UserService; };
//在controller中返回所得到内容,并设定返回值参数
客户端:使用vue来进行实现,使用vuex 配合addRouter来进行实现
对vuex部分进行处理
/** *state.js */ export default{ //传入uid uid:3, //判断是否有权限 hasAuth:false, //保存获取的路由树结构 userRouters:[] } /** *actions */ async setUserRouters({commit,state}){ //使用axios获取后端数据 const userRouters = await getUser({vin:state.uid}), //使用工具函数处理树结构 payload = formatRouterTree(userRouters); //在mutations中写入将数据保存 commit(‘setUserRouters‘,payload); commit(‘setAuth‘,true); } /** *使用的工具函数 */ function formatRouterTree(data){ //根据pid是否为0来将路由分离,为0的为根路由,其他为子路由 let parents = data.filter(p=>{return p.pid == 0}), children = data.filter(c=>{return c.pid != 0}); dataToTree(parents,children) function dataToTree(parents,children){ parents.map((p)=>{ children.map((c,i)=>{ //假如此时子路由的pid与父级路由的id相同,则当前路由为父//子//关系, if (c.pid == p.id) { //拷贝自身 let _c = JSON.parse(JSON.stringify(children)); //删除拷贝后的自身 _c.splice(i,1); //将当前项作为唯一父级路由继续递归,其他子路由作为参数//传递 dataToTree([c],_c); if (p.children) { //如果有children则直接push p.children.push(c) }else{ //添加children p.children = [c]; } } }) }) } return parents } //将树形结构转化为vue路由形式 function generateRouter(userRouters){ let newRouters = userRouters.map((r)=>{ let routes ={ path:r.path, name:r.name, component:()=>import(`@/views/${r.name}`) } if (r.children) { routes.children = generateRouter(r.children); } return routes; }) return newRouters } //mutation.js export default { setAuth(state,auth){ state.hasAuth = auth; }, setUserRouters(state,userRouters) { state.userRouters = userRouters; } } //main.js router.beforeEach(async (to,from,next)=>{ if (!store.state.hasAuth){ // 请求数据 await store.dispatch(‘setUserRouters‘) const newRoutes = generateRouter(store.state.userRouters); //将获取的新路由直接添加至router router.addRoutes(newRoutes) next({path:to.path}) }else { next(); } })