目录
1.项目功能：
- 支持不同身份权限的员工登录，并根据权限展示不同的页面内容。
- 商品管理：可以对商品的各个属性实现增删改查功能
- 权限管理：可以对员工的账号和角色权限进行增删改查
- 数据可视化：用服务端返回的数据实现动态化的图表显示
2.数据的获取及存储
设置代理跨域和axios二次封装
- 项目根目录/vue.config.js（代理跨域）：设置启动代理的url字段和服务器地址
- utils/request.js（axios二次封装）：设置默认url头(配合代理跨域)和请求响应拦截器，响应拦截器检测如果返回的数据有token的话，就存储到本地缓存
封装请求接口
api文件夹存放请求接口，每个功能模块都单独用文件夹存放，防止维护混乱
VUEX发送请求并存储数据
模块化：store内的index.js引入了所有小仓库
在小仓库内发送请求，并存储返回的数据。在页面内通过$store使用
3.路由跳转及守卫设置
配置各个模块的路由信息和重定向，通过路由元信息设置侧边栏显示的模块名称
全局导航守卫
登录检测：
- 登录成功会获得token并存储在本地缓存内。
- 如果没有token则去任何页面都会前往登录页。
- 已经有token就发送请求获取用户数据，请求成功前往目标页，请求失败说明token过期了，去登录页重新登录
4.路由、按钮权限设置
常量路由：所有人都可以访问的路由
异步路由：根据不同的角色权限可以显示访问的路由
- 登录成功时，通过token获取用户信息和权限(按钮、路由、角色信息等)信息存储到仓库里
- 在仓库中存储根据不同员工计算的路由结果
- 用服务器返回的当前角色权限信息对异步路由进行过滤
按钮权限
大部分和菜单权限差不多 从服务器返回的权限信息菜单和按钮是分开的，先获取用户权限信息 封装方法挂到原型上，查找仓库内用户按钮权限数组是否有该按钮权限 给按钮添加v-if或v-show 调用封装方法，传入该按钮的权限信息
5.页面功能解析
登录页
- 输入用户密码
- 点击登录：收集表单数据
- 验证函数进行验证，确定全部符合条件后发送请求
- 请求成功获取token，并持久化储存
797
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
