项目结构
├── config // 配置相关
├── public // 第三方不打包资源
│ └──favicon.ico // favicon图标
│ └── Tinymce // 富文本
├── src // 源代码
│ ├── api // 所有请求
│ ├── assets // 主题 字体等静态资源
│ ├── components // 全局公用组件
│ ├── hook // hook
│ ├── mock // 项目mock 模拟数据
│ ├── router // 路由
│ ├── store // 全局 store管理
│ ├── styles // 全局样式
│ ├── typings // intface 类型
│ ├── utils // 全局公用方法
│ ├── views // view
│ ├── App.vue // 入口页面
│ ├── main.js // 入口 加载组件 初始化等
│ └── permission.ts // 权限管理
├── .env // 环境配置
├── .env.development // 开发环境配置
├── .env.production // 生产环境配置
├── eslintrc.js // eslint 配置项
├── .gitignore // git 忽略项
├── babel.condig.js // babel-loader 配置
├── index.html // html模板
├──package.json // package.json
└── postcss.config.js // postcss 配置
登录与权限
基本思路
权限验证与安全性是非常重要的,可以说是一个后台项目一开始就必须考虑和搭建的基础核心功能。我们所要做到的是:不同的权限对应着不同的路由,同时侧边栏也需根据不同的权限,异步生成。实现登录和权限验证的思路:
- 登录:当用户填写完账号和密码后向服务端验证是否正确,验证通过之后,服务端会返回一个token,拿到token之后(将这个token存贮到cookie中,保证刷新页面后能记住用户登录状态),前端会根据token再去拉取一个 user_info 的接口来获取用户的详细信息(如用户权限,用户名等等信息)。
- 权限验证:通过token获取用户对应的 role,动态根据用户的 role 算出其对应有权限的路由,通过 router.addRoutes 动态挂载这些路由。
上述所有的数据和操作都是通过vuex全局管理控制的。(补充说明:刷新页面后 vuex的内容也会丢失,所以需要重复上述的那些操作)。
登录页面
随便找一个空白页面撸上两个input的框,一个是登录账号,一个是登录密码。再放置一个登录按钮。我们将登录按钮上绑上click事件,点击登录之后向服务端提交账号和密码进行验证。 这就是一个最简单的登录页面。如果你觉得还要写的更加完美点,你可以在向服务端提交之前对账号和密码做一次简单的校验。
参考
【1】手摸手,带你用 vue 撸后台 系列一(基础篇)
【2】手摸手,带你用 vue 撸后台 系列二(登录权限篇)
【3】手摸手,带你用 vue 撸后台 系列三 (实战篇)
【4】手摸手,带你用 vue 撸后台 系列四(vueAdmin 一个极简的后台基础模板)
【5】手摸手,带你封装一个 vue component
【6】手摸手,带你优雅的使用 icon
【7】如何优雅的在 vue 中添加权限控制