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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章