VPC

VPC

Vue permission Control

項目描述

基於vue 開發的一套統一登入前端使用者權限管理的後台系統

項目地址

• dave-wind

建構

 # install node+git please

# install dependencies
$ npm install / cnpm install

# serve with hot reload at localhost:8060
$ npm run dev

# build for production with minification
$ npm run build

專案分析

基本思路

構思

前端做權限控制，無非後台傳數據前端做判斷我看了大多數項目都有角色的概念前端在router.beforEach 導航守衛做文章但當我站在巨人肩旁眺望遠方的時總結覺得前端與業務邏輯是需要解耦的角色的概念都是人為提出的其實前端只看數據那把權限就抽出來就是數組不同的身份角色給前端不同的數組再與本地所有的路由做匹配返回一個菜單給用戶展示

骨架

vue-cli 初始化專案後基於模組化骨架元件構成：Login + Home Header Sidebar Home 業務內容放入Hoem content內即可

登入

VPC適用於多項目統一登入在Login頁面登入成功返回的有效token 在進行第二步操作獲取用戶資料, 資料保存在vuex內考慮到刷新問題因此獲取用戶資料就必須放在根組件App.vue 內,因為Vue是單向流思想Login 作為App的子元件需要在Login 登入成功後$emit 到App 執行callback 取得使用者數據

介面mock

上面說到資料本專案採用easy-mock mock資料後端資料規定採用RestFul協定mock了多種不同身分使用者登入成功回200，token失效401 登入成功返回token 透過flyio 在header 新增token 記得這是第一次在Login頁添加以後每次介面呼叫都需添加token 可在flyio 攔截器裡做

使用者資料操作

返回權限數組在App頁面透過遞歸fullPath 本機所有路由操作取得使用者有效路由保存在Vuex內

頁面展示

在Sidebar for循環vuex儲存的有效路由並展示Home元件展示路由特定內容

設計構圖

結構

 │
├─build
│      build.js
│      check-versions.js
│      utils.js
│      vue-loader.conf.js
│      webpack.base.conf.js
│      webpack.dev.conf.js
│      webpack.prod.conf.js
│
├─config
│      dev.env.js
│      index.js
│      prod.env.js
│
├─src
│  │  404.vue
│  │  App.vue                                // 根组件
│  │  bus.js                                 // EventBus 适用于兄弟组件 通信
│  │  dave.js                                // canvas 效果
│  │  globar.js                              // webpack 全局注册ui组件
│  │  main.js                                // 项目入口
│  │  tools.js                               // 插件
│  │
│  ├─api
│  │      axios.js
│  │      common.js                          // 基本接口
│  │      request.js                         // flyio 拦截器
│  │      weather.js                         // 天气接口
│  │
│  ├─assets
│  │  │  logo.png
│  │  │
│  │  └─theme-dave                            // 自定义主题
│  │
│  ├─components                               // 主要组件
│  │  ├─common
│  │  │      Header.vue
│  │  │      Home.vue
│  │  │      Login.vue
│  │  │      SideBar.vue
│  │  │
│  │  ├─render                                 // render 渲染组件 适用多条件渲染
│  │  │      btn-render.vue
│  │  │
│  │  ├─ui
│  │  │      baseButton.vue                    // 基于element-ui btn ui组件 可层叠复用
│  │  │
│  │  └─view
│  │          403.vue
│  │          404.vue
│  │          allocation.vue
│  │          render.vue
│  │          watch.vue
│  │
│  ├─router                                    // 本地所有路由
│  │      fullPath.js
│  │      index.js                             // 基本路由
│  │
│  └─store                                     // 状态管理 全局变量
│          actions.js
│          getters.js
│          index.js
│          mutations.js
│          state.js
│
│  .babelrc
│  .editorconfig
│  .eslintignore
│  .eslintrc.js                                 // 基于airbnb-base 个人配置的代码规则
│  .gitignore
│  .postcssrc.js
│  index.html
│  package-lock.json
│  package.json
│  README.md

專案模組

login

• 項目適用與多後台系統統一登入一個入口登入介面就是正常的密碼登錄，返回token後保存在Authorization 內
• 在App.vue 也就是根元件router-view 內接受子元件$emit 後執行login方法呼叫介面統一取得權限資料在App內完成

 < router-view @login =" login " @clearData =" clearData " > </ router-view > 

統一清除函數

法典秉承一個入口一個出口的宗旨

• 在header元件logout執行後清除token 刷新頁面
• 因為我們在根元件App內對有無token 會做判斷所以logout 無需路由跳轉
• 只要到login.vue 初始化時就執行clearData 清除所有數據

 clearData ( ) {
 if ( this . $route . path === '/login' ) {
     delete request . config . headers [ 'Authorization' ] ;
     localStorage . removeItem ( 'token' ) ;
     this . $store . dispatch ( 'CLEAR_STORE' ) ;
 }       
} 

token失效

flyio 全域攔截回應只要失效使用者存取頁面呼叫介面失效狀態碼回傳401 就跳轉回login頁面

 if ( err . response . status === 401 ) {
    window . location . href = '/#/login' ;
  } 

flyio

• flyio 很棒在瀏覽器node 行動裝置小程式不同環境都可以運用VPC在webpack.base.conf.js 有以下設定import 引入才正確
• flyio 在小程式裡走的是wx套件模組詳情可看官網或mpvue-netBar

alias: {
  'vue$' : 'vue/dist/vue.esm.js' ,
  '@' : resolve ( 'src' ) ,
  'flyio' : 'flyio/dist/npm/fly'
    }
    

• flyio 親測並沒有jsonp method 目前解決跨域都是後端在header頭上設定Access-Control-Allow-Origin: '*'
• 本專案採用ajax jsonp（是不是又回到寫jquery的時代？jquery真的很強大呀！！）

組件註冊

webpack 神器啊require.context

• 透過require.context 去讀取指定路徑下的元件例如我們需要寫很多公共的ui元件但每次需要import 引入就很麻煩就用它吧
• 效果就是自動動態require元件需要三參數搜素的檔案目錄是否搜素其子目錄、配一個正規就完事了

打包優化

• npm run build --report 可分析dist包大小便於逐步擊破該死的文件
• config index.js productionSourceMap 以及cssSourceMap 都改為false 目的就是要幹掉該死的map文件
• npm install --save-dev compression-webpack-plugin 後productionGzip 設定為true 開啟亞索模式，呸是壓縮也會減少體積你不妨試試
• 非同步元件但實話告訴你們其實非同步元件並不能優化多少dist大小
• cdn 外部載入資源webpack.base.conf.js 加上externals （雖然我tm每次都拼錯）

 externals: {
    vue : 'Vue' ,
    'element-ui' : 'ElementUI' ,
    nprogress : 'NProgress' ,
    jquery : 'window.$'
  }
  

• 接著在index內載入cdn 資源切記所有上externals的車的程式碼內部不能寫Vue.use 不然cdn載入就是扯犢子因為Vue.use 就是Vue寫插件的會掛載在Vue原型上

自動部署

詳情可至travis CI 官網注意:

• webpack 配置需要修改在config index.js 內build VPC 改為assetsPublicPath: '' 而不是根目錄'/' 不然js會404
• 具體travis-CI 配置結果不一樣詳情可看官網或仿照VPC .travis.yml 配置

技術分析

Vue組件通訊使用分析

1.Vuex：狀態管理模式,集中式儲存管理應用的所有元件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化2.EventBus: 非父子元件的通訊使用事件中心，允許元件自由交流案例重現： 當我例如在該專案中Header元件裡改變一個變數屬性值並要求在SideBar 和Home元件裡回應其變更時如何做？ 3.分析： Vuex 顧名思義就是管理全域變量，這裡是管理而不是只讀是可讀，可更改可檢測的，Vue是單向流首先介紹一下ECMAScript兩個屬性： 資料屬性和存取器屬性，前者: [Configurable]，[[Enumerable],[Writable],[Value] 可設定可枚舉可複寫value 通常物件字面量建立物件var person = { name: "dave" }就是資料屬性改變和讀取的只是物件的value 而後者存取器屬性[Configurable]]，[[Enumerable]],[[Get]],[[Set]，在JavaScript中我們使用Object.defineProperty來定義訪問器屬性在Vue裡取得this.person 就是呼叫get方法設定就是set方法。 Vue有自己的data tree 正是透過存取器屬性才實現依賴追蹤watch的除此Vuex EventBus 之外Vue.prototype.xx 以及this.$root 和本機儲存localStorage 操作元件變數都不具備watch功能

4.總結： Vue.prototype.xx，this.$root 只是可讀取的和更改的在Vue的原型上修改讀取但並不能watch, Vue.prototype.xx 可以寫全域變數用來做校驗證默認值等操作localStorage 也是。它可以讀取設定有人說可以用addEventListener 監聽storage 但是並不期望在Vue層這麼做,本項目token 就是用本地存儲綜上所屬此案例就可以用到vuex 我們需要變量可預測接著執行callback 如果你覺得麻煩就用EventBus 兄弟元件通訊,$emit 觸發$on監聽回呼即可

事後一根煙

本專案建構重點不是需要豐富的後台元件而是權限路由控制思想只是搭建骨架給自己工作上做一總結後期會多加封裝組件化進專案之中，使"專案"更加充實健壯