VPC

VPC

Kontrol izin Vue

Deskripsi proyek

Sistem backend untuk manajemen hak pengguna front-end login terpadu yang dikembangkan berdasarkan vue

Alamat proyek

• angin dave

Membangun

 # 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

Analisis proyek

Ide dasar

Memahami

Front-end melakukan kontrol izin, yang tidak lebih dari mengirimkan data ke latar belakang. Front-end membuat penilaian. Saya telah melihat bahwa sebagian besar proyek memiliki konsep peran. Front-end membuat keributan tentang router peran yang perlu dipisahkan diusulkan secara artifisial. Faktanya, front end hanya melihat data dan mengekstrak izin. Peran identitas yang berbeda diberikan ke front end ke dalam array yang berbeda dan kemudian dicocokkan dengan semua rute lokal untuk mengembalikan menu untuk ditampilkan kepada pengguna.

kerangka

Setelah vue-cli menginisialisasi proyek, proyek tersebut terdiri dari komponen kerangka modular: Login + Home Header Sidebar Home dan konten bisnis dapat ditempatkan di konten Hoem.

Masuk

VPC cocok untuk login terpadu beberapa proyek. Token valid yang dikembalikan setelah login berhasil pada halaman Login dilakukan pada langkah kedua untuk mendapatkan data pengguna. Mengingat masalah penyegaran, perolehan data pengguna harus ditempatkan di komponen root App.vue. Karena Vue adalah ide aliran satu arah, Login, sebagai subkomponen Aplikasi, perlu $emit ke Aplikasi setelah login berhasil dan menjalankan panggilan balik untuk mendapatkan data pengguna.

Tiruan antarmuka

Seperti disebutkan di atas, proyek ini menggunakan data tiruan yang mudah ditiru. Peraturan data back-end menggunakan protokol RestFul untuk meniru banyak pengguna dengan identitas berbeda. Login yang berhasil menghasilkan 200, pembatalan token 401. Login yang berhasil mengembalikan token melalui flyio. Ingat ini adalah pertama kalinya. Setelah menambahkannya ke halaman Login, Anda perlu menambahkan token untuk setiap panggilan antarmuka, yang dapat dilakukan di pencegat flyio.

Operasi data pengguna

Kembalikan array izin pada halaman Aplikasi melalui fullPath rekursif. Semua operasi perutean lokal mendapatkan rute efektif pengguna dan menyimpannya di Vuex.

Tampilan halaman

Di loop Sidebar for, rute efektif yang disimpan di vuex ditampilkan dan komponen Beranda ditampilkan untuk menampilkan konten spesifik dari rute.

komposisi desain

struktur

 │
├─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

modul proyek

login

• Proyek ini cocok untuk login terpadu dengan beberapa sistem back-end. Antarmuka login satu pintu masuk adalah login kata sandi normal.
• Di App.vue, yang merupakan tampilan router komponen root, terima sub-komponen $emit dan kemudian jalankan metode login untuk memanggil antarmuka guna mendapatkan data izin secara seragam dan menyelesaikannya di Aplikasi.

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

Fungsi jelas terpadu

Kode tersebut menganut tujuan satu pintu masuk dan satu pintu keluar.

• Hapus token dan segarkan halaman setelah logout komponen header dijalankan.
• Karena kita akan menentukan apakah ada token di Aplikasi komponen root, tidak perlu ada lompatan perutean saat logout.
• Selama login.vue diinisialisasi, clearData dijalankan untuk menghapus semua data.

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

tandanya tidak valid

Respons intersepsi global Flyio akan melompat kembali ke halaman login selama pengguna yang tidak valid mengakses halaman tersebut dan memanggil kode status kegagalan antarmuka dan mengembalikan 401.

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

terbangio

• flyio sangat bagus. VPC dapat digunakan di berbagai lingkungan node browser dan applet seluler. Di webpack.base.conf.js, konfigurasi impornya adalah sebagai berikut.
• Flyio menggunakan modul paket wx di mini programnya. Untuk detailnya, silakan lihat situs resminya atau mpvue-netBar.

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

• Tidak ada metode jsonp dalam pengujian pribadi flyio. Saat ini, solusi lintas domain adalah menyetel Access-Control-Allow-Origin: '*' di header di backend.
• Proyek ini menggunakan ajax jsonp (apakah kita kembali ke era penulisan jquery? jquery sangat kuat!!)

Pendaftaran komponen

artefak webpack memerlukan.konteks

• Gunakan require.context untuk membaca komponen di bawah jalur yang ditentukan. Misalnya, kita perlu menulis banyak komponen UI publik, tetapi sangat merepotkan untuk mengimpornya setiap saat, jadi gunakanlah.
• Efeknya adalah komponen kebutuhan dinamis otomatis memerlukan tiga parameter: apakah direktori file yang akan dicari harus dicari subdirektorinya dan ekspresi regulernya, dan hanya itu.

Optimalisasi pengemasan

• npm run build --report dapat menganalisis ukuran paket dist untuk menghancurkan file sialan itu secara bertahap
• Ubah config index.js productionSourceMap dan cssSourceMap menjadi false untuk mematikan file peta sialan itu.
• Setelah npm install --save-dev compression-webpack-plugin, atur productionGzip ke true dan aktifkan mode Yasuo. Anda sebaiknya mencobanya.
• Komponen asinkron, tetapi sejujurnya, komponen asinkron tidak dapat terlalu mengoptimalkan ukuran dist.
• cdn memuat sumber daya secara eksternal webpack.base.conf.js plus eksternal (walaupun saya selalu salah mengejanya)

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

• Kemudian muat sumber daya cdn di indeks. Ingatlah bahwa Vue.use tidak dapat ditulis dalam kode semua mobil eksternal. Jika tidak, pemuatan cdn adalah omong kosong karena Vue.use adalah plug-in yang ditulis oleh Vue dan akan dipasang di Vue. prototipe.

Penerapan otomatis

Untuk detailnya, silakan kunjungi situs web resmi travis CI.

• Konfigurasi webpack perlu diubah dalam konfigurasi VPC bawaan index.js ke assetsPublicPath: '' alih-alih direktori root '/' jika tidak, js akan menjadi 404
• Hasil konfigurasi spesifik travis-CI berbeda-beda. Untuk detailnya, silakan lihat situs web resmi atau ikuti konfigurasi VPC .travis.yml.

analisis teknis

Analisis penggunaan komunikasi komponen Vue

1.Vuex: Mode manajemen status, manajemen penyimpanan terpusat dari status semua komponen aplikasi, dan aturan terkait untuk memastikan bahwa status berubah dengan cara yang dapat diprediksi 2.EventBus: Komunikasi komponen non-induk dan anak menggunakan pusat acara untuk izinkan komponen Reproduksi kasus komunikasi gratis: Apa yang harus saya lakukan ketika, misalnya, saya mengubah nilai atribut variabel di komponen Header dalam proyek ini dan memerlukan komponen SideBar dan Home untuk merespons perubahan tersebut? 3. Analisis: Vuex, seperti namanya, mengelola variabel global. Ini adalah manajemen, bukan hanya baca, yang dapat dibaca, diubah, dan dideteksi. Vue adalah aliran satu arah. Pertama, mari kita perkenalkan dua atribut ECMAScript : atribut data dan atribut pengakses. Yang pertama: [Dapat Dikonfigurasi], [[Dapat Ditulis], [Nilai] Nilai yang dapat dikonfigurasi, dapat dihitung, dan dapat diganti Biasanya literal objek membuat objek var person = { nama: "dave" } Artinya, yang diubah dan dibaca oleh atribut data hanyalah nilai objek, dan properti pengakses terakhir [Configurable]], [[Enumerable]], [[Get]], [[Set], dalam JavaScript kita menggunakan Object .defineProperty untuk menentukan akses Untuk mendapatkan this.person di Vue, atribut perangkat memanggil metode get untuk mengaturnya, yang merupakan metode set. Vue memiliki pohon datanya sendiri. Melalui atribut accessor jam tangan pelacakan ketergantungan diimplementasikan. Selain Vuex EventBus, Vue.prototype.xx dan variabel komponen operasi this.$root dan penyimpanan lokal localStorage tidak memiliki fungsi jam tangan.

4. Ringkasan: Vue.prototype.xx, this.$root hanya dapat dibaca dan diubah. Anda dapat memodifikasi dan membaca pada prototipe Vue tetapi tidak dapat menonton. Nilai dll. juga beroperasi di Penyimpanan lokal. Itu dapat membaca pengaturan. Beberapa orang mengatakan bahwa Anda dapat menggunakan addEventListener untuk memantau penyimpanan, tetapi Anda tidak berharap untuk melakukan ini di lapisan Vue. Token dari proyek ini adalah menggunakan penyimpanan lokal vuex. Kita membutuhkan variabel yang dapat diprediksi dan kemudian mengeksekusi callback. Jika Anda berpikir Jika Anda berada dalam masalah, cukup gunakan komponen saudara EventBus untuk berkomunikasi, dan $emit memicu callback $on listening.

Sebatang rokok sesudahnya

Fokus dari proyek ini bukan pada kebutuhan akan komponen latar belakang yang kaya tetapi pada gagasan kontrol perutean izin. Ini hanya membangun kerangka untuk meringkas pekerjaan Anda. Nantinya, lebih banyak komponen yang dienkapsulasi akan ditambahkan ke proyek untuk membuat "proyek" yang lebih besar dan kuat.