前端做权限可以做什么？
根据不同用户的权限显示不同的菜单栏， 未登录的用户进行拦截，直接跳回首页，根据不同的用户配置不同的路由。
1 菜单栏的显示，不同用户登录展现不同的菜单栏；
01 用户在登录页，点击登录时，会将当前登录用户的信息（账号密码等）传递给后端， 后端拿到前端传来的数据，进行分析比对，如果登录成功，返回当前用户可以显示的数据
因为登录用户的信息是多页面共用的，通常会把登录成功后的用户信息存储到vuex 中；如下图就是一个vuex状态管理模块， setMunuList()方法是用来操作state中的menuList的，（因为vue中不提倡直接修改state中的状态，如果想要修改vuex中state的状态，最佳的实践办法就是通过 调用mutation 来修改state中的数据）
02 前端获取到当前用户展示的数据，将数据存储到vuex 中，如下图：
当登录成功后，将获取的数据存储到vuex的state中
this.$tore.commit() 调用mutations中的方法， 第一个参数是： 调用的方法名， 第二个参数是 ：传递的数据
通过调用mutations中的方法将登录成功后的数据赋值给state下的menuList
存储成功后，在任意页面都可以通过vuex来直接获取登录用户信息的数据
03 当用户登录成功跳转到首页的时候，从vuex中取值并赋值给首页菜单栏
04 这样 更具不同用户的权限显示不同的菜单栏 就实现了。
坑： 页面刷新后vuex数据会消失，导致菜单栏消失
原因： 刷新页面，vuex会重新加载，但是缺少了登录步骤中的赋值（就是登录成功后，将后端返回的参数通过this.$store.commit()传给vuex的state中）， 缺少了这一步，vuex的state就会是空的， 页面重新渲染，从vuex中取出来的值是空的，所以菜单栏就会消失。
解决页面刷新菜单栏消失的问题： 如下
解决思路是： 等用户登录成功后，在vuex的mutations中 将数据 存储到 sessionStorage 中（sessionStorage localStorage cookie 都是前端用来存储数据的，保持会话的）。
需要注意 向seessionStorage 中存储数据的时候，要用存储 JSON 格式的， 所以存储前要对数据进行JSON转换， 通过 JSON.stringfy() 即可实现；
从sessionStroage 中 获取数据数据的时候，获取到的是JSON格式的（因为你存的时候就是JSON 格式的）， 我们需要转化为 对象模式的数据， 通过JSON.parse() 既可以实现
