后台管理系统第一课:知识点和vue-element-admin

一.后台管理系统的大致功能：

1. 登录：对用户身份进行认证；

2. 系统管理：可以新增、修改、删除、查询用户；

3. 角色管理：可以新增、修改、删除、查询角色；

4. 菜单管理：可以新增、修改、删除、查询菜单；该功能在前后端分离项目开发中，对应的是前端的动态路由。

5. 权限管理：可以新增、修改、删除、查询权限；该功能定义的是某一功能模块下的按钮，在有一些系统中菜单管理和权限管理可以合并为一个，统称为权限管理。

6. 数据库备份：为保证您的数据安全本系统采用了数据库备份功能；

7. 上传管理：管理你增加产品时上传的图片及其他文件；

8. 网站配置：可以修改网站基础信息的配置，如：标题、关键字、描述、备案号等；

9. 其它业务功能

 

在前后端分离中，解决用户认证与授权的问题主要是通过无状态的Session管理机制来进行:

 

 

token失效怎么办?写一半文章,token过期,后端会返回来状态码,那么我们就需要在响应拦截那里,根据状态码,再获取一个新的token,再重新调用接口

二.无状态Session管理机制

1.什么是Session？

在网络应用中，Session被称为“会话控制”。(session和cookie是一对,这里的session不是sessionstorage)

Session对象存储特定用户会话所需的信息。

当用户在应用程序的Web页之间跳转时，存储在Session对象中的变量将不会丢失，而是在整个用户会话中一直存在下去。

当用户请求来自应用程序的 Web页时，如果该用户还没有会话，则Web服务器将自动创建一个 Session对象。

当会话过期或被放弃后，服务器将终止该会话。Session 对象最常见的一个用法就是存储用户的首选项。

例如，如果用户指明不喜欢查看图形，就可以将该信息存储在Session对象中。

有关使用Session 对象的详细信息，注意会话状态仅在支持cookie的浏览器中保留。

为什么需要Cookie的支持呢?

因为Session是存储在服务器端的数据，要区分具体数据的所属关系，那就需要建立一个关联关系，相当于人和姓名。

只不过在Session的机制中，姓名对应的是Session ID,而具体的人是数据，那当客户端首次进入服务器端时，服务器端为该客户端，生成一个ID，并告知客户端（将ID存储在Cookie中），这样服务器端和客户端就都知道自己的ID了，接下来的操作，服务器端只要获取Cookie中的ID，就能知道存储的数据。

2.无状态Session管理机制

在前后端分离开发时，由于后端程序并不知道前端的种种操作，如跳转页面、是否有权限，但是后端程序又掌握着整个系统的安全、数据、接口等生杀大权，但是后台又不能把用户信息存储在Session中，因为Session是在支持Cookie的浏览器中才可以保留，因为后端程序是依靠一个Session ID来进行识别用户的。

但是现在前后端分离，全程都使用Ajax来请求数据，并且有的浏览器可能会把Cookie禁用了，这就会导致服务器端识别不了用户的身份。

由于这个原因，就迎来了无状态的Session机制，所谓的无状态Session管理机制:就是当用户带着身份数据进行登录时，登录成功后，服务器端会使用登录成功的用户信息，进行特定规则的加密，得出一个加密的串，从而把加密的串返回给前端程序。

接下来的操作，前端只需要每次都携带着这个加密的串去请求后端接口，后端在获取到加密的串时进行特定规则解密，解密出来的数据就是用户的身份数据，接着判断该数据是否有效。从而决定是否进行接下来的操作。具体流程图如下：

 

 

 

三. JWT 令牌

1.JWT 是什么？

JSON Web Token（JWT）是一个开放的行业标准（RFC 7519），它定义了一种紧凑且独立的方式，用于在各方之间作为JSON对象安全地传输信息。此信息可以通过数字签名进行验证和信任。JWT可以使用秘密（使用HMAC算法）或使用RSA或ECDSA的公钥/私钥对进行签名，防止被篡改。

JWT 官网：https://jwt.io  想深入了解的可网站查看

JWT 的构成：JWT 有三部分构成：头部、有效载荷、签名 

例如：aaaaa.bbbbbb.cccccccc

头部：包含令牌的类型（JWT） 与加密的签名算法（如 SHA256 或 ES256），Base64编码后加入第一部分。

有效载荷：通俗一点讲就是token中需要携带的信息都将存于此部分，比如：用户id、权限标识等信息。

注：该部分信息任何人都可以读出来，所以添加的信息需要加密才会保证信息的安全性 

签名：用于防止 JWT 内容被篡改, 会将头部和有效载荷分别进行 Base64编码，编码后用 . 连接组成新的字符串，然后再使用头部声明的签名算法进行签名。在具有秘钥的情况下，可以验证JWT的准确性，是否被篡改。

2. JWT 优缺点

JWT 的优点： 

1. JWT 基于 json，非常方便解析。

2. 可以在令牌中自定义丰富的内容，易扩展。

3. 通过非对称加密算法及数字签名技术，JWT 防止篡改，安全性高。

4. 资源服务器使用 JWT 可以不依赖认证服务器，即可完成授权。 oauth2

JWT 的缺点：

1. JWT令牌较长，占存储空间比较大，但是用户信息是有限的，所以在可接受范围。

 

明白了上述对JWT的介绍和优缺点，我们Session无状态的令牌就使用JWT来进行生成。

在前后端分离项目中，前端并不需要对JWT令牌进行解密，只需要将JWT令牌存储在指定的地方即可。

3. 什么是身份认证？

身份认证指的是用户去访问系统资源时，系统要求验证用户的身份信息，用户身份合法才访问对应资源。

常见的身份认证一般要求用户提供用户名和密码(或者手机号,微信,qq等等)。系统通过校验用户名和密码来完成认证过程。

4. 什么是用户授权

当身份认证通过后，去访问系统的资源，系统会判断用户是否拥有访问该资源的权限，只允许访问有权限的系统资源，没有权限的资源将无法访问，这个过程叫用户授权。

比如 会员管理模块有增删改查功能，有的用户只能进行查询，而有的用户可以进行修改、删除。一般来说，系统会为不同的用户分配不同的角色，而每个角色则对应一系列的权限。

四.vue-element-admin

vue-element-admin 是一个后台前端解决方案，它基于 vue 和 element-ui实现。它使用了最新的前端技术栈，内置了 i18n 国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助你快速搭建企业级中后台产品原型。相信不管你的需求是什么，本项目都能帮助到你.

git clone https://gitee.com/panjiachen/vue-element-admin.git

目录讲解
src : 
    api :  接口js配置
    assets :  静态资源(该目录会被webpack打包，public下的不会被webpack打包)
    components : 自定义组件
        BackToTop : 返回首页        项目需要
        Breadcrumb : 面包屑        项目需要
        Charts : 图表
        DndList : 拖拽列表
        DragSelect : 拖拽选择
        Dropzone : 拖拽上传
        ErrorLog : 错误日志
        GithubCorner : Github
        Hamburger : 头部切换左侧菜单的按钮       项目需要
        HeaderSearch : 头部搜索                       项目需要
        ImageCropper : 图片裁剪
        JsonEditor : JSON编辑器
        Kanban : 看板
        MarkdownEditor : Markdown 编辑器
        MDinput : Markdown 输入
        Pagination : 分页 (有bug,不好用)
        PanThumb : 缩略图
        RightPanel : 右侧容器                            项目需要
        Screenfull : 全屏                                   项目需要
        Share : 分享
        SizeSelect : 尺寸选择                             项目需要
        Sticky : 吸附（当页面滚动到指定位置，会吸附到指定的位置）
        SvgIcon : Svg图标                                项目需要
        TextHoverEffect : 文本滑过效果
        ThemePicker : 主题选择器
        Tinymce : 富文本编辑器                          项目需要
        Upload : 上传
        UploadExcel : 上传Excel
    directive : 自定义指令
    filter : 过滤器
    icons : 图标
    layout : 布局相关的文件
    router : 路由相关的文件
    store : Vuex
    styles : 样式代码
    utils : 工具相关的文件(重点)
    vendor : 导出生成相关
    view :  页面文件（我们将来的页面都要放在views里）
        charts : 图表
        clipboard : 剪贴板
        components-demo : 组件演示
        dashboard : 首页（仪表盘)           项目需要
        documentation : 文档
        error-log : 错误日志
        error-page : 错误页面                 项目需要
        example : 实例
        excel : Excel
        guide : 指南
        icons : 图标                               项目需要
        login : 登录                               项目需要
        nested : 嵌套路由
        pdf : pdf
        permission : 权限
        profile : 个人信息                        项目需要
        qiniu : 七牛云配置
        redirect : 重定向
        tab : 标签
        table : 表格
        theme : 主题
        zip : 压缩

permission.js : 权限、路由拦截(导航守卫)
settings.js : 全局配置信息

.env.development : 开发环境配置文件
.env.production : 生产环境配置文件                    

 

观看视频1  观看视频2