* 在`components`中新建权限组件`Authorized.vue`组件
```
<script>
import { check } from "../utils/auth";
export default {
// 函数式组件
functional: true,
props: {
authority: {
type: Array,
required: true,
},
},
render(h, context) {
const { props, scopedSlots } = context;
return check(props.authority) ? scopedSlots.default() : null;
},
};
</script>
```
* 权限组件在各个组件使用到，注册成为全局组建,在`main.js`中添加
```
import Authorized from "@/components/Authorized";
Vue.component("Authorized", Authorized);
```
* 在`src/layouts/BasicLayout.vue`引入权限组件
~~~
<Authorized :authority="['admin']">
<setting-drawer />
</Authorized>
~~~
* 当前用户权限为admin时可以看到动态布局按钮，其他权限将看不到
