VPC

วีพีซี

การควบคุมการอนุญาต Vue

รายละเอียดโครงการ

ระบบแบ็คเอนด์สำหรับการจัดการสิทธิ์ผู้ใช้ฟรอนต์เอนด์การเข้าสู่ระบบแบบรวมที่พัฒนาบน vue

ที่อยู่โครงการ

• เดฟ-ลม

สร้าง

 # 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

การวิเคราะห์โครงการ

แนวคิดพื้นฐาน

ตั้งครรภ์

ส่วนหน้าทำการควบคุมการอนุญาตซึ่งไม่มีอะไรมากไปกว่าการส่งข้อมูลไปยังพื้นหลัง ฉันได้เห็นแล้วว่าโปรเจ็กต์ส่วนใหญ่มีแนวคิดเกี่ยวกับบทบาท ของบทบาทที่ต้องแยกออกจากกันนั้นถูกเสนอขึ้นมาโดยไม่ได้ตั้งใจ ที่จริงแล้ว ส่วนหน้าจะดูเฉพาะข้อมูลและแยกสิทธิ์เท่านั้น เพื่อแสดงให้ผู้ใช้เห็น

โครงกระดูก

หลังจากที่ vue-cli เริ่มต้นโปรเจ็กต์แล้ว จะประกอบด้วยส่วนประกอบโครงกระดูกแบบโมดูลาร์: หน้าแรกล็อกอิน + หน้าแรก แถบด้านข้างส่วนหัว และเนื้อหาธุรกิจสามารถวางไว้ในเนื้อหา Hoem ได้

เข้าสู่ระบบ

VPC เหมาะสำหรับการเข้าสู่ระบบแบบรวมศูนย์ของหลายโครงการ โทเค็นที่ถูกต้องที่ส่งคืนหลังจากการเข้าสู่ระบบสำเร็จในหน้าเข้าสู่ระบบจะดำเนินการในขั้นตอนที่สองเพื่อรับข้อมูลผู้ใช้ ในคอมโพเนนต์รูท App.vue เนื่องจาก Vue เป็นแนวคิดโฟลว์ทางเดียว การเข้าสู่ระบบในฐานะองค์ประกอบย่อยของแอป จึงต้อง $emit ไปยังแอปหลังจากเข้าสู่ระบบสำเร็จและดำเนินการโทรกลับเพื่อรับข้อมูลผู้ใช้

อินเทอร์เฟซจำลอง

ดังที่ได้กล่าวไว้ข้างต้น โปรเจ็กต์นี้ใช้ข้อมูลจำลองแบบง่าย กฎข้อบังคับด้านข้อมูลแบ็คเอนด์ใช้โปรโตคอล RestFul เพื่อจำลองผู้ใช้หลายรายที่มีข้อมูลประจำตัวที่แตกต่างกัน ผ่าน flyio โปรดจำไว้ว่านี่เป็นครั้งแรกหลังจากเพิ่มลงในหน้าเข้าสู่ระบบแล้วคุณจะต้องเพิ่มโทเค็นสำหรับการเรียกอินเทอร์เฟซแต่ละครั้งซึ่งสามารถทำได้ในเครื่องสกัดกั้น flyio

การดำเนินการข้อมูลผู้ใช้

ส่งคืนอาร์เรย์การอนุญาตบนหน้าแอปผ่าน fullPath แบบเรียกซ้ำ การดำเนินการกำหนดเส้นทางในเครื่องทั้งหมดได้รับเส้นทางที่มีประสิทธิภาพของผู้ใช้และบันทึกไว้ใน Vuex

การแสดงหน้า

ในแถบด้านข้างสำหรับลูป เส้นทางที่มีประสิทธิภาพที่จัดเก็บไว้ใน 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

โมดูลโครงการ

เข้าสู่ระบบ

• โปรเจ็กต์นี้เหมาะสำหรับการเข้าสู่ระบบแบบรวมเข้ากับระบบแบ็คเอนด์หลายระบบ อินเทอร์เฟซการเข้าสู่ระบบทางเข้าเดียวคือการเข้าสู่ระบบด้วยรหัสผ่านปกติ โทเค็นจะถูกส่งกลับและจัดเก็บไว้ในการอนุญาต
• ใน App.vue ซึ่งเป็นส่วนประกอบ root-view ให้ยอมรับองค์ประกอบย่อย $emit จากนั้นดำเนินการวิธีการเข้าสู่ระบบเพื่อเรียกอินเทอร์เฟซเพื่อรับข้อมูลการอนุญาตอย่างสม่ำเสมอและดำเนินการให้เสร็จสิ้นในแอป

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

ฟังก์ชั่นที่ชัดเจนแบบครบวงจร

รหัสเป็นไปตามวัตถุประสงค์ของทางเข้าเดียวและทางออกเดียว

• ล้างโทเค็นและรีเฟรชเพจหลังจากดำเนินการล็อกเอาต์ส่วนประกอบส่วนหัวแล้ว
• เนื่องจากเราจะตรวจสอบว่ามีโทเค็นในแอปส่วนประกอบรูทหรือไม่ จึงไม่จำเป็นต้องเปลี่ยนเส้นทางในการออกจากระบบ
• ตราบใดที่ล็อกอิน.vue ถูกเตรียมใช้งาน clearData จะถูกดำเนินการเพื่อล้างข้อมูลทั้งหมด

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

โทเค็นไม่ถูกต้อง

การตอบสนองการสกัดกั้นทั่วโลกของ Flyio จะข้ามกลับไปที่หน้าเข้าสู่ระบบตราบใดที่ผู้ใช้ที่ไม่ถูกต้องเข้าถึงเพจและเรียกรหัสสถานะความล้มเหลวของอินเทอร์เฟซและส่งกลับ 401

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

ฟลายโอ

• flyio นั้นยอดเยี่ยมมาก VPC สามารถใช้ในสภาพแวดล้อมที่แตกต่างกันของโหนดเบราว์เซอร์และแอปเพล็ตมือถือ ใน webpack.base.conf.js การกำหนดค่าการนำเข้าจะเป็นดังนี้
• Flyio ใช้โมดูลแพ็คเกจ wx ในมินิโปรแกรม สำหรับรายละเอียด โปรดดูที่เว็บไซต์อย่างเป็นทางการหรือ mpvue-netBar

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

• ไม่มีวิธี jsonp ในการทดสอบส่วนตัวของ flyio ในปัจจุบัน โซลูชันข้ามโดเมนคือการตั้งค่า Access-Control-Allow-Origin: '*' ในส่วนหัวของแบ็กเอนด์
• โปรเจ็กต์นี้ใช้ ajax jsonp (เรากลับไปสู่ยุคของการเขียน jquery แล้วหรือยัง jquery แรงจริง!!)

การลงทะเบียนส่วนประกอบ

สิ่งประดิษฐ์ webpack need.context

• ใช้ need.context เพื่ออ่านส่วนประกอบภายใต้เส้นทางที่ระบุ ตัวอย่างเช่น เราจำเป็นต้องเขียนส่วนประกอบ UI สาธารณะจำนวนมาก แต่การนำเข้าส่วนประกอบเหล่านั้นทุกครั้งเป็นเรื่องยากมาก ดังนั้นให้ใช้มัน
• ผลที่ได้คือคอมโพเนนต์ need ไดนามิกอัตโนมัติต้องใช้พารามิเตอร์สามตัว: ไม่ว่าไดเร็กทอรีไฟล์ที่จะค้นหาจะต้องค้นหาไดเร็กทอรีย่อยและนิพจน์ทั่วไปหรือไม่เท่านั้นเอง

การเพิ่มประสิทธิภาพบรรจุภัณฑ์

• npm run build --report สามารถวิเคราะห์ขนาดแพ็คเกจ dist เพื่อค่อยๆ ทำลายไฟล์เจ้ากรรม
• เปลี่ยน config index.js ProductionSourceMap และ cssSourceMap เป็น false เพื่อฆ่าไฟล์แผนที่เจ้ากรรม
• หลังจาก npm install --save-dev Compression-webpack-plugin ให้ตั้งค่า ProductionGzip เป็น True และเปิดใช้งานโหมด Yasuo การบีบอัดจะลดขนาดลงเช่นกัน
• ส่วนประกอบแบบอะซิงโครนัส แต่เพื่อบอกความจริงแก่คุณ ส่วนประกอบแบบอะซิงโครนัสไม่สามารถปรับขนาด dist ได้มากนัก
• cdn ทรัพยากรที่โหลดจากภายนอก webpack.base.conf.js รวมถึงภายนอก (แม้ว่าฉันจะสะกดผิดทุกครั้ง)

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

• จากนั้นโหลดรีซอร์ส cdn ในดัชนี โปรดจำไว้ว่า Vue.use ไม่สามารถเขียนในโค้ดของรถยนต์ภายนอกทั้งหมดได้ มิฉะนั้น การโหลด cdn นั้นไร้สาระ เนื่องจาก Vue.use เป็นปลั๊กอินที่เขียนโดย Vue และจะถูกเมาท์บน Vue ต้นแบบ

การปรับใช้อัตโนมัติ

สำหรับรายละเอียด กรุณาเยี่ยมชมเว็บไซต์อย่างเป็นทางการของ Travis CI หมายเหตุ:

• จำเป็นต้องแก้ไขการกำหนดค่า webpack ใน config index.js VPC ในตัวเป็น AssetPublicPath: '' แทนที่จะเป็นไดเรกทอรีราก '/' มิฉะนั้น js จะเป็น 404
• ผลลัพธ์การกำหนดค่า travis-CI เฉพาะจะแตกต่างออกไป สำหรับรายละเอียด โปรดดูที่เว็บไซต์อย่างเป็นทางการหรือติดตามการกำหนดค่า VPC .travis.yml

การวิเคราะห์ทางเทคนิค

การวิเคราะห์การใช้งานการสื่อสารคอมโพเนนต์ Vue

1.Vuex: โหมดการจัดการสถานะ การจัดการพื้นที่เก็บข้อมูลแบบรวมศูนย์ของสถานะของส่วนประกอบทั้งหมดของแอปพลิเคชัน และกฎที่เกี่ยวข้องเพื่อให้แน่ใจว่าสถานะเปลี่ยนแปลงไปในลักษณะที่คาดเดาได้ 2.EventBus: การสื่อสารของส่วนประกอบที่ไม่ใช่ระดับบนสุดและระดับรองใช้ศูนย์เหตุการณ์เพื่อ อนุญาตส่วนประกอบ การสร้างกรณีการสื่อสารโดยอิสระ: ฉันควรทำอย่างไร เมื่อฉันเปลี่ยนค่าแอตทริบิวต์ตัวแปรในส่วนประกอบส่วนหัวในโปรเจ็กต์นี้ และต้องการให้ส่วนประกอบแถบด้านข้างและหน้าแรกตอบสนองต่อการเปลี่ยนแปลง 3. การวิเคราะห์: Vuex ทำหน้าที่จัดการตัวแปรส่วนกลาง ซึ่งไม่ใช่แบบอ่านอย่างเดียว ซึ่งสามารถอ่านได้ เปลี่ยนแปลงได้ และตรวจจับได้ : คุณลักษณะข้อมูลและคุณลักษณะตัวเข้าถึง แบบแรก: [Configurable], [[Enumerable], [Writable], [Value] Configurable, enumerable, overridable value โดยปกติแล้ว object literal จะสร้าง object var person = { name: "dave" } นั่นคือสิ่งที่แอตทริบิวต์ข้อมูลเปลี่ยนแปลงและอ่านเป็นเพียงค่าของวัตถุและคุณสมบัติตัวเข้าถึงหลัง [Configurable]], [[Enumerable]], [[Get]], [[Set] ใน JavaScript เราใช้ Object .defineProperty เพื่อกำหนดการเข้าถึง หากต้องการรับ this.person ใน Vue แอ็ตทริบิวต์ของอุปกรณ์คือการเรียกเมธอด get เพื่อตั้งค่า ซึ่งเป็นเมธอด set Vue มีแผนผังข้อมูลของตัวเอง โดยผ่านแอ็ตทริบิวต์ accessor ที่ใช้การติดตามการพึ่งพา นอกเหนือจาก Vuex EventBus แล้ว Vue.prototype.xx และ this.$root และตัวแปรส่วนประกอบการดำเนินการ localStorage ในเครื่องไม่มีฟังก์ชัน watch

4. สรุป: Vue.prototype.xx, this.$root สามารถอ่านและเปลี่ยนแปลงได้เท่านั้น คุณสามารถแก้ไขและอ่านบนต้นแบบ Vue ได้ แต่ไม่สามารถรับชมได้ Vue.prototype.xx สามารถเขียนตัวแปรส่วนกลางสำหรับการสอบเทียบและการตรวจสอบตามค่าเริ่มต้น ค่าต่างๆ ฯลฯ ดำเนินการบน localStorage เช่นกัน สามารถอ่านการตั้งค่าได้ บางคนบอกว่าคุณสามารถใช้ addEventListener เพื่อตรวจสอบพื้นที่เก็บข้อมูลได้ แต่คุณไม่ได้คาดหวังที่จะทำสิ่งนี้ในเลเยอร์ Vue vuex เราต้องการให้ตัวแปรสามารถคาดเดาได้ จากนั้นจึงดำเนินการโทรกลับ หากคุณคิดว่าคุณกำลังประสบปัญหา เพียงใช้ส่วนประกอบพี่น้องของ EventBus เพื่อสื่อสาร จากนั้น $emit จะทริกเกอร์การโทรกลับ $on

บุหรี่หลังจากนั้น

จุดเน้นของโปรเจ็กต์นี้ไม่ได้อยู่ที่ความต้องการส่วนประกอบพื้นหลังที่หลากหลาย แต่อยู่ที่แนวคิดของการควบคุมการกำหนดเส้นทางการอนุญาต มันเป็นเพียงการสร้างโครงกระดูกเพื่อสรุปงานของคุณ ในภายหลัง ส่วนประกอบที่ห่อหุ้มเพิ่มเติมจะถูกเพิ่มเข้าไปในโปรเจ็กต์เพื่อสร้าง "โครงการ" ที่สำคัญและแข็งแกร่งยิ่งขึ้น