首页 > Web开发 > 详细

前端配合nodejs实现权限管理,路由动态加载

时间:2021-02-15 23:35:14      阅读:149      评论:0      收藏:0      [点我收藏+]

前端权限实现

工具: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();
    }
})

最后将生成的树形结构循环递归组件生成导航栏.

前端配合nodejs实现权限管理,路由动态加载

原文:https://www.cnblogs.com/ll-11/p/14405605.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!