后台管理系统是和前端一起上传到服务器的吗?

是。前端和后端之所以需要对接，是因为前端页面只负责提供视图没有内容，而后端只提供内容，两者所谓的对接，就是把后端的内容放在前端页面预留出来的位置上。虽然说是前端后端，但这一对接实际发生在服务器端。

1.1 权限的分类

（1）后端权限

从根本上讲前端仅仅只是视图层的展示，权限的核心是在服务器中的数据变化，所以后端才是权限的概念，后端权限可以控制某个用户是否能够查询数据，是否能够修改数据等操作

在登录请求中，会得到权限数据，当然，这个需要后端返回数据的支持，前端根据权限数据，展示对应的菜单，点击菜单才能查看相关的界面

如果用户没有登录，手动在地址栏敲入管理界面地址，则需要跳转到登录页面

如果用户已经登录，如果手动敲入非权限内的地址，则需要跳转到404页面

在某个菜单的界面中，还得根据权限数据，展示出可以进行操作的按钮，比如，删除，修改，增加

如果用户通过非常规操作，比如通过浏览器调试工具将某些禁用的按钮变成启用状态，此时发送的请求，也应该被前端所拦截

用户登录后服务器返回一个数据，这个数据有菜单列表和token，我们把这个数据放到 vuex 中，然后主页根据 vuex 中的数据进行菜单列表的渲染

问题：刷新界面 vuex 数据消失，菜单栏消失

解决：将数据存储在 sessionStorage 中，并让其和 vuex 中的数据保持同步

登录成功后，将token数据存储在 sessionStorage 中，判断其是否登录

问题：这样用户在登录之后就可以访问其他界面了，但如果用户A登录之后只能访问a页面，不能访问页面，但是这个时候还是可以通过地址栏输入进入到b页面

解决：当然我们也可以设置路由导航守卫，但是如果有多个页面，设置会非常不方便，并且对于A来说，它是不用访问b页面的，这时候我们何不对A不显示b页面，这个时候我们就用到了 动态路由

这样当用户A在地址栏输入自己不能访问的路由时，则不会跳转到该页面，会跳转到404页面

问题：如果我们重新刷新的话，动态路由就会消失，动态路由是登录成功之后才会调用的，刷新的时候并没有调用，所以动态路由并没有添加上

解决：可以在 app.vue 中的 created 中调用动态路由的方法

虽然用户可以看到某些界面了，但是这个界面的一些按钮该用户可能是没有权限的。因此，我们需要对组件中的一些按钮进行控制，用户不具备权限的按钮就隐藏或者禁用，而在这块的实现中个，可以把该逻辑放在自定义指令中

比如，我们可以根据后端返回的数据right来判断用户有什么权限

添加自定义指令

v-permission="{action:'add',effect:'disavled'}"

在permission.js中

（1）请求控制

（2）响应控制

得到了服务器返回的状态码是401，代表token超时或者被篡改了，此时应该强制跳转到登录界面

前端权限的实现之须要后端提供数据支持，否则无法实现。

返回的权限数据结构，前后端须要沟通协商怎样的数据使用起来才最方便

---