VueCli3 多页开发 token权限控制的一个框架说明

1：项目结构

assets目录：放置静态文件的地方
filtres: 放置全局过滤器的地方
pages:放置页面
plugins: 放配置文件

1. axios.js 设置axios
2. check-token：操作token的地方
3. element 全局注册element的地方
4. http: axios的二次封装请求中转处理

store： vuex存放的位置

2：多页开发

pages下面的两个目录（index, user），访问页面就是http://localhost:8080/index.html#/+自定义路由 / http://localhost:8080/user.html#/+自定义路由
每个项目都由每个目录下面的router，app.js, app.Vue 单独控制

3： 环境配置

在package.json文件中配置了三个打包环境和一个本地运行环境
serve: 本地开发环境配置文件 .env.development
local: 本地打包测试环境配置文件.env.local
test: 测试打包环境配置文件.env.test
build: 线上打包环境配置文件 .env.production

VUE_APP_TOKEN_VALID_SECOND=28 token自动刷新时间
VUE_APP_NAME = base 保存token在cookie里面前面的参数

因为我配置这个框架的时候有些数据会在其他的地方拉。所以配置的接口地址有几个。
登录地址因为全平台统一所以写在配置文件里，不同的环境调不同的地址（你如果是项目内的登录的话可以删掉，并且把里面引用这个地址的地方改成你自己的登录路由）
打包地址也会根据后端的配置不同的环境不同的打包地址

4：axios的封装

plugins/axios.js

plugins/http.js

根据你的环境配置里面的接口地址可以一直写下去。
回调的数据进行了全局处理，

5： 权限控制

每个页面里面的created事件里面都调用了重置刷新token的一个事件

在router里面每个跳转之前判断一次token是否存在，不存在就跳转登录。
github地址：vuecli3-elementUi-less