VPC
1.0.0
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 は、複数のプロジェクトの統合ログインに適しています。ログイン ページでのログイン成功後に返される有効なトークンは、ユーザー データを取得するために vuex に保存されます。リフレッシュの問題を考慮して、ユーザー データの取得を配置する必要があります。 Vue は一方向のフローのアイデアであるため、Login はアプリのサブコンポーネントとして、ログイン成功後にアプリに $emit を実行し、ユーザー データを取得するためにコールバックを実行する必要があります。
前述したように、このプロジェクトは easy-mock モック データを使用します。バックエンド データ規制では、RestFul プロトコルを使用して、異なる ID を持つ複数のユーザーをモックします。ログインに成功すると、トークンが返されます。これが初めてであることを覚えておいてください。ログイン ページに追加した後、インターフェイス呼び出しごとにトークンを追加する必要があります。これは、flyio インターセプターで実行できます。
すべてのローカル ルーティング操作は、再帰的な 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
< router-view @login =" login " @clearData =" clearData " > </ router-view > このコードは、入口と出口を 1 つずつにするという目的に従っています。
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' ;
} alias: {
'vue$' : 'vue/dist/vue.esm.js' ,
'@' : resolve ( 'src' ) ,
'flyio' : 'flyio/dist/npm/fly'
}
Webpack アーティファクト require.context
externals: {
vue : 'Vue' ,
'element-ui' : 'ElementUI' ,
nprogress : 'NProgress' ,
jquery : 'window.$'
}
詳細はtravis CI公式サイトをご覧ください。
Vue コンポーネントの通信使用状況の分析
1.Vuex: 状態管理モード、アプリケーションのすべてのコンポーネントの状態の集中ストレージ管理、および状態が予測可能な方法で変化することを保証するための対応するルール 2.EventBus: 親および子以外のコンポーネントの通信はイベント センターを使用して、コンポーネントを許可する 自由な通信ケースの再現: たとえば、このプロジェクトの Header コンポーネントの変数属性値を変更し、SideBar コンポーネントと Home コンポーネントがその変更に応答する必要がある場合はどうすればよいですか? 3. 分析: Vuex は、名前が示すように、読み取り専用ではなく管理を行います。Vue は一方向のフローです。まず、ECMAScript の 2 つの属性を紹介します。 : データ属性とアクセサー属性。前者: [構成可能]、[[列挙可能]、[書き込み可能]、[値] 構成可能、列挙可能、オーバーライド可能な値 通常、オブジェクト リテラルはオブジェクトを作成します var person = { name: "dave" }つまり、データ属性が変更および読み取るのはオブジェクトの値のみであり、後者のアクセサー プロパティ [Configurable]]、[[Enumerable]]、[[Get]]、[[Set]、JavaScript では Object を使用します。アクセスを定義する .defineProperty Vue で this.person を取得するには、デバイス属性は get メソッドを呼び出して設定します。これが set メソッドです。 Vue には独自のデータ ツリーがあり、依存関係追跡ウォッチは Vuex EventBus に加えて、Vue.prototype.xx とローカル ストレージ localStorage 操作コンポーネント変数によって実装されます。
4. 概要: Vue.prototype.xx、this.$root は読み取りと変更のみ可能です。Vue プロトタイプの変更と読み取りは可能ですが、デフォルトでは調整と検証のためのグローバル変数を書き込むことはできません。値などもlocalStorage上で動作します。 addEventListener を使用してストレージを監視できると言う人もいますが、このプロジェクトのトークンはローカル ストレージを使用することを想定していません。変数が予測可能である必要があるので、コールバックを実行します。問題がある場合は、EventBus 兄弟コンポーネントを使用して通信すると、$emit が $on リスニング コールバックをトリガーします。
このプロジェクトの焦点は、豊富なバックグラウンド コンポーネントの必要性ではなく、作業を要約するためのスケルトンを構築することです。後で、より多くのカプセル化されたコンポーネントがプロジェクトに追加されます。 「プロジェクト」をより充実、より強固に。
