vue项目中的按钮权限配置

用v-directive自定义指令自定义一个v-permission来根据后端返回的数据进行按钮的显示隐藏从而达到按钮权限控制

Vuedirective('permission', function(el,binding,vnode){

  consolelog(el)

  consolelog(binding)

  consolelog(vnode)

  elstyledisplay=bindingvalue === 'btn1'"none":"block"

})

el : 指令所绑定的元素，可以用来直接 *** 作 DOM 。

binding : 一个对象，包含以下属性：

               name : 指令名，不包括 v- 前缀。

               value : 指令的绑定值， 例如： v-my-directive="1 + 1", value 的值是 2。

               oldValue : 指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。

               expression : 绑定值的表达式或变量名。 例如 v-my-directive="1 + 1" ， expression 的值是 "1 + 1"。

               arg : 传给指令的参数。例如 v-my-directive:foo， arg 的值是 "foo"。

               modifiers : 一个包含修饰符的对象。 例如： v-my-directivefoobar, 修饰符对象 modifiers 的值是 { foo: true,               bar: true }。

vnode : Vue 编译生成的虚拟节点。

通过一个数组渲染菜单，实现页面权限的自动配置。

n级菜单有n-1级菜单构成以此类推可得：多级菜单就是通过二级菜单循环构成。在element-ui中找到 NavMenu 导航菜单 组件，使用该组件做一个二级菜单的循环体组件。菜单数据存储在vuex中。

在组件中判断是否有子集来加载不同的模块。二级菜单内部通过插槽来加载循环生成的一级组件数组，如下 list-item 组件

index属性可以用菜单对象中的任意属性代替只需要它是唯一的

从后台获取不同角色的不同菜单数据，再通过两个递归函数来渲染菜单和动态添加菜单路由，实现页面的权限配置。

>要通过Vue的前端界面修改左侧菜单栏的权限，您可以将菜单项数据存储在Vue组件的data属性中，并根据用户不同的权限来动态设置菜单的显示方式。具体步骤如下：
1 在Vue组件中创建一个data属性，用来存储菜单项的数据。例如：
```
data() {
return {
menuItems: [
{ name: '仪表盘', icon: 'el-icon-menu', path: '/dashboard', canView: true },
{ name: '用户管理', icon: 'el-icon-user', path: '/users', canView: false },
{ name: '文章管理', icon: 'el-icon-document', path: '/article', canView: true }
]
}
}
```
2 使用v-for循环渲染menuItems数组中的菜单项，并使用v-if根据canView属性动态设置菜单项的显示方式。例如：
```
<el-menu>
<el-menu-item v-for="item in menuItems" :key="itempath" v-if="itemcanView">
<i :class="itemicon"></i>
<span slot="title">{{ itemname }}</span>
</el-menu-item>
</el-menu>
```
在这个示例中，只有canView属性为true的菜单项才会被渲染出来。
3 在Vue组件的methods属性中添加一个方法，用来在界面上修改菜单项的权限。例如：
```
methods: {
changeMenuView(item) {
itemcanView = !itemcanView;
}
}
```
在这个示例中，changeMenuView方法会根据传入的菜单项item对象的canView属性值进行取反 *** 作，实现菜单项权限的修改。
完成上述 *** 作后，您就可以通过界面修改菜单项的权限，从而实现动态显示和隐藏的效果。这种方法可以使应用程序更加灵活，便于根据用户角色对菜单进行动态控制。

首先在appvue里面有这么一段<router-view class="router-view" ></router-view>
然后你所点击的按钮其实是这个东西<router-link :to=""></router-link>，这个其实就是个封装完的a标签
你在router里面配置完了相关路由之后就能在点击这个按钮的时候将router-view标签里面的组件替换掉了
Vue 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

路由权限思路：

1菜单栏/导航栏(一级权限)
在登录成功后，获取后端的权限数据, 根据权限数据，展示对应的路由导航或菜单即可;

2界面的控制
如果用户没有登录, 用户手动在地址栏输入路由地址，则需要跳转到登录界面
如果用户已经登录, 用户手动输入的非权限内的路由地址，则给他跳转到404界面

3按钮的控制(二级权限)
在页面中，有些账号有: 添加，删除，修改，增加等权限, 有些没有
没有权限的账号在这个页面只是可以浏览页面中的数据，需要对这些按钮 禁用or隐藏。

4请求和响应的控制 （这一步其实后端也会根据token判断身份信息, 来返回数据，可以省略）
如果用户通过非常规的手段(可能是同行), 比如通过浏览器f12将禁用的按钮disabled 改成false, 隐藏的按钮apacity:0改成了1，这些按钮就可以使用了，此时需要对按钮点击后发出的请求作出拦截

loginvue

homevue (elment-ui)
侧边导航栏

storejs

routerjs

动态路需两个地方调用:
1 loginvue 中登录成功后立即执行动态路由函数
2 appvue中, 在根组件中添加执行动态路由函数，这样每一次用户刷新，就会执行，否则刷新之后，动态路由就没了

思路3：按钮的控制(二级权限): 这里我是通过 自定义指令来实现 对按钮(增,删,改等二级权限按钮) 的显示隐藏。
更简单直接的方式，直接就在html中对button添加v-if显示隐藏即可
import '/utils/permissionjs' --> mainjs中引入文件, 嫌麻烦直接在mainjs中写

4 服务器返回状态码401, 代表token超时 or token被串改 or 未传token, 此时强制跳转到登录页重新登录

---