页面 登录后页面权限控制

 

平安的方法

1.登录

• 账户名，密码利用sm2进行加密
  • 登录后保存当前的Token 并调用后端接口查询当前账户的perms值

2.vue-Router中的index.js

{
    path:'/Dialog',
    name:'Dialog',
    redirect:'/Dialog/DialogResult',
    meta:{
        perm:'m:Dialog',//将权限值给后端
        title:'XXX',
    }
}

3.vue-Router中的permission.js 

//匹配权限
@params usersPerms 用户拥有的权限集合 后端返回 存在vuex中
@params routePerm router/index.js 中的路由表信息

function hasPermission(userPerms,routerPerm){
    //"*"表示所有资源
     if(userPerms.some(p=>p.val== "*")) return true
    //如果菜单路由上没有声明perm属性，默认显示该菜单，代表所有人都可访问
    if(!routerPerm) return true;
    //判断当前用户的资源权限中是否包含菜单路由中声明的权限
    return userPerms.some(p=>p.val==routerPerm)
}

router.beforeEach((to,from,next)=>{
    if(hasPermission(store.getters.perms,to.meta.perm)){
        next()
    }else{
        next({path:'/401',replace:true,query:{noGoBack:true}})
    }
})