权限菜单（后端返回数据）

权限菜单

后端准备数据：

 

Server.js

let express  = require('express');



let app = express();

app.use('*', function (req, res, next) {

    res.header('Access-Control-Allow-Origin', '*');

    //Access-Control-Allow-Headers ,可根据浏览器的F12查看,把对应的粘贴在这里就行

    res.header('Access-Control-Allow-Headers', 'Content-Type');

    res.header('Access-Control-Allow-Methods', '*');

    res.header('Content-Type', 'application/json;charset=utf-8');

    next();

});

app.get('/role',(req,res)=>{

    res.json({

        menuList:[

            {pid:-1,path:'/cart',name:'购物车',id:1,auth:'cart'},

            {pid:1,path:'/cart/cart-list',name:'购物车列表',id:4,auth:'cart-list'},

            // {pid:4,path:'/cart/cart-list/lottery',auth:'lottery',id:5,name:'彩票'},

            {pid:4,path:'/cart/cart-list/product',auth:'product',id:6,name:'商品'},

            //{pid:-1,path:'/shop',name:'商店',id:2,auth:'shop'},

            {pid:-1,path:'/profile',name:'个人中心',id:3,auth:'profile'},

        ],

        buttonAuth:{

            edit:true, // 可编辑

        }

    })

})

app.listen(3000);

 

后端服务跑起来，测试如下：

 

 

把这些菜单对应的页面写出来：

 

 

 

 

 

 

 

配置路由：

 

测试：

 

 

路由配置完毕，现在后端给我们返回的数据格式如下：

 

把上面的数据格式化成我们需要的，保存在vuex中，如下：

 

 

在main.js：

 

效果：

 

在上面的数据有个auth项，代表有没有这个权限。如果没有这个权限，到时候会把这个菜单从路由规则中删除掉。把所有的auto都过滤出来，如下：

 

 

测试：

 

如果后端数据变了，如下：

 

效果：

 

把菜单渲染出来，使用element-ui：

 

 

 

在Home中使用，如下：

 

代码：

<template>

<el-menu

default-active="2"

class="el-menu-vertical-demo"

>

<el-submenu index="1">

<template slot="title">导航一</template>

<el-submenu index="1-1">

<template slot="title">选项1-1</template>

<el-menu-item index="1-1-1">选项1-1-1</el-menu-item>

<el-menu-item index="1-1-1">选项1-1-2</el-menu-item>

</el-submenu>

</el-submenu>

<el-menu-item index="2">导航二</el-menu-item>

<el-menu-item index="3">导航三</el-menu-item>

<el-menu-item index="4">导航四</el-menu-item>

</el-menu>

</template>

 

效果：

 

点击时跳转：

 

 

 

 

把我们刚才得到的数据渲染到上面：

 

 

 

渲染的时候，我们发现，这个时候我们需要使用到递归组件，如下：

 

在Home中使用这个组件：

 

效果：

 

但是如果后端没有给我们返回profile，也是拦不住的，如下：

 

 

 

如何解决？

答：根据权限动态添加路由 （我们的路由要分成两部分 一部分是有权限 另一部分是没权限的）

 

 

 

 

 

测试：

 

 

 

再次测试：

 

效果：

 

两种路由方案：

• meta：是可以看到菜单，点击后校验权限
• 后台返回：如果没有权限，根本看不到

 

后端也可以返回是否有这个编辑按钮：