springboot+shiro+jwt+vue全家桶+redis搭建的后台系统脚手架（前端部分）.zip

# rainbow_vue ## springboot+jwt+shiro+vue搭建的前端项目 ### [项目后台地址](https://github.com/makePromise/rainbow_vue_java) ### 技术交流：QQ--1649471814 ### 项目技术 #### 应用了vue全家桶 vue-cli3.0 +vuex axios vue-router elementUi。 ### 项目部署 #### 1.首先安装node和vue的基本环境，自行上网百度。 #### 2.cd 到 rainbow_vue 更目录执行命令 npm install 然后npm run serve 命令运行,下方会出现项目的地址。 ### 项目预览   ### [更多图片](https://github.com/makePromise/rainbow_vue/tree/master/src/assets) ### 技术简单理解 #### 因为我是做后台的，所以前端学习的时候会配合后台理解一下，如果不对，请见谅。 #### 1.axios: 等同与后台的ajax 用于请求的发出。 #### 2.vuex: 你可以理解为你在系统内定义了一个唯一的变量，并且提供getset方法去更改，例如用户名之类的值，这就是vuex。 #### 3.vue-router: 前台的路由跳转，类似于后台的requestMapping. #### 4.elementUi: 这个和舒服，不用自己写效果了，直接参考文档把需要的组件拉过来. #### 4.vue-cli3.0: 快速构建前台项目的脚手架. ### 项目思路  #### 1.首先输入用户名与密码进行登入，如果成功返回一个加密的JWT密匙（同时后台把密匙存储在redis），失败的话直接返回401错误(帐号或密码不正确)。 #### 2.以后访问都要在请求头上带上这个JWT密匙，后台鉴权重写了Shiro的入口过滤器JWTFilter(BasicHttpAuthenticationFilter)，判断请求 #### Header里面是否包含Authorization字段，有就进行Shiro的Token登录认证授权(判断redis是否存在toekn密匙,不存在则失效，重新登陆)，没有就无访问 ### 动态路由和路由卫士 #### 路由卫士：请求发出如果是白名单直接放行，否则判断token，有token则正常登陆，请求菜单放行，否则去登陆页面。  #### 动态加载菜单: 利用递归把路由格式化，利用addRouters注册路由