项目结构

  1. ├── config                     // 配置相关
  2. ├── public                     // 第三方不打包资源
  3. │   └──favicon.ico             // favicon图标
  4. │   └── Tinymce                // 富文本
  5. ├── src                        // 源代码
  6. │   ├── api                    // 所有请求
  7. │   ├── assets                 // 主题 字体等静态资源
  8. │   ├── components             // 全局公用组件
  9. │   ├── hook                   // hook
  10. │   ├── mock                   // 项目mock 模拟数据
  11. │   ├── router                 // 路由
  12. │   ├── store                  // 全局 store管理
  13. │   ├── styles                 // 全局样式
  14. │   ├── typings                // intface 类型
  15. │   ├── utils                  // 全局公用方法
  16. │   ├── views                   // view
  17. │   ├── App.vue                // 入口页面
  18. │   ├── main.js                // 入口 加载组件 初始化等
  19. │   └── permission.ts          // 权限管理
  20. ├── .env                       // 环境配置
  21. ├── .env.development           // 开发环境配置
  22. ├── .env.production            // 生产环境配置
  23. ├── eslintrc.js                // eslint 配置项
  24. ├── .gitignore                 // git 忽略项
  25. ├── babel.condig.js            // babel-loader 配置
  26. ├── index.html                 // html模板
  27. ├──package.json                // package.json
  28. └── 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 中添加权限控制