VPC

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

프로젝트 분석

기본 아이디어

배다

프론트엔드는 데이터를 백그라운드로 전송하는 것에 지나지 않는 권한 제어를 수행합니다. 대부분의 프로젝트에서 라우터에 대한 개념을 가지고 있는 것을 보았습니다. 실제로 프런트엔드는 데이터만 보고 권한을 추출합니다. 다양한 ID 역할이 프런트엔드에 여러 배열로 부여된 다음 모든 로컬 경로와 일치하여 메뉴를 반환합니다. 사용자에게 표시합니다.

해골

vue-cli가 프로젝트를 초기화한 후에는 모듈식 뼈대 구성 요소로 구성됩니다. 로그인 + 홈 헤더 사이드바 홈과 비즈니스 콘텐츠를 Hoem 콘텐츠에 배치할 수 있습니다.

로그인

VPC는 여러 프로젝트의 통합 로그인에 적합합니다. 로그인 페이지에서 성공적인 로그인 후 반환되는 유효한 토큰은 사용자 데이터를 얻기 위해 수행됩니다. 데이터는 새로 고침 문제를 고려하여 저장됩니다. Vue는 단방향 흐름 아이디어이기 때문에 앱의 하위 구성 요소인 Login은 로그인 성공 후 앱에 $emit를 실행하고 사용자 데이터를 얻기 위해 콜백을 실행해야 합니다.

인터페이스 모의

위에서 언급했듯이 이 프로젝트는 Easy-Mock Mock 데이터를 사용합니다. RestFul 프로토콜을 사용하여 서로 다른 ID를 가진 여러 사용자를 모의합니다. 성공적인 로그인은 200, 토큰 무효화 401을 반환합니다. 헤더에 토큰을 추가합니다. flyio를 통해 로그인 페이지에 추가한 후 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

프로젝트 모듈

로그인

• 이 프로젝트는 여러 백엔드 시스템을 사용한 통합 로그인에 적합합니다. 하나의 입구 로그인 인터페이스는 일반 비밀번호 로그인으로 토큰이 반환되어 Authorization에 저장됩니다.
• 루트 컴포넌트인 router-view인 App.vue에서 하위 컴포넌트인 $emit를 수락한 후 login 메소드를 실행하여 인터페이스를 호출하여 권한 데이터를 균일하게 얻어 App에서 완성합니다.

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

통일된 클리어 기능

이 코드는 하나의 입구와 하나의 출구라는 목적을 따릅니다.

• 헤더 구성 요소 로그아웃이 실행된 후 토큰을 지우고 페이지를 새로 고칩니다.
• 루트 구성 요소 앱에 토큰이 있는지 확인하므로 로그아웃 시 라우팅 점프가 필요하지 않습니다.
• login.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'
    }
    

• flyio의 개인 테스트에는 jsonp 방법이 없습니다. 현재 크로스 도메인 솔루션은 백엔드 헤더에 Access-Control-Allow-Origin: '*'을 설정하는 것입니다.
• 이 프로젝트는 ajax jsonp를 사용합니다. (이제 jquery 작성 시대로 돌아간 걸까요? jquery는 정말 강력합니다!!)

부품 등록

웹팩 아티팩트 require.context

• require.context를 사용하면 지정된 경로에 있는 컴포넌트를 읽을 수 있습니다. 예를 들어 공개 UI 컴포넌트를 많이 작성해야 하는데 매번 import하는 것은 매우 번거로우므로 사용하세요.
• 결과적으로 자동 동적 요구 구성 요소에는 세 가지 매개 변수, 즉 검색할 파일 디렉터리에서 해당 하위 디렉터리와 정규식을 검색할지 여부, 그게 전부입니다.

포장 최적화

• npm run build --report는 dist 패키지 크기를 분석하여 해당 파일을 점진적으로 파괴할 수 있습니다.
• 빌어먹을 맵 파일을 없애려면 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는 모든 외부 자동차의 코드에 작성될 수 없다는 점을 기억하세요. 그렇지 않으면 Vue.use가 Vue에서 작성된 플러그인이고 Vue에 마운트되기 때문에 CDN 로딩은 의미가 없습니다. 원기.

자동 배포

자세한 내용은 Travis CI 공식 웹사이트를 참조하세요.

• webpack 구성은 index.js 내장 VPC에서 루트 디렉토리 '/' 대신에assetsPublicPath: ''로 수정해야 합니다. 그렇지 않으면 js는 404가 됩니다.
• 구체적인 travis-CI 구성 결과는 다릅니다. 자세한 내용은 공식 홈페이지를 참조하거나 VPC .travis.yml 구성을 따르세요.

기술적 분석

Vue 컴포넌트 통신 사용량 분석

1.Vuex: 상태 관리 모드, 애플리케이션의 모든 구성 요소 상태에 대한 중앙 집중식 저장 관리 및 상태가 예측 가능한 방식으로 변경되도록 보장하는 해당 규칙 2.EventBus: 상위 및 하위 구성 요소가 아닌 구성 요소의 통신은 이벤트 센터를 사용하여 허용 컴포넌트 자유로운 통신 사례 재현: 예를 들어 이 프로젝트에서 Header 컴포넌트의 변수 속성 값을 변경하고 SideBar 및 Home 컴포넌트가 변경 사항에 응답하도록 요구하는 경우 어떻게 해야 합니까? 3. 분석: Vuex는 이름에서 알 수 있듯이 읽기 전용이 아닌 관리이며, 읽기, 변경 및 감지가 가능합니다. 먼저 ECMAScript의 두 가지 속성을 소개하겠습니다. : 데이터 속성 및 접근자 속성 전자: [Configurable], [[Enumerable], [Writable], [Value] 구성 가능, 열거 가능, 재정의 가능 값 일반적으로 객체 리터럴은 객체 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 프로토타입에서 수정하고 읽을 수 있지만 Vue.prototype.xx는 기본적으로 교정 및 확인을 위한 전역 변수를 작성할 수 있습니다. 값 등은 localStorage에서도 작동합니다. 설정을 읽을 수 있습니다. 어떤 사람들은 addEventListener를 사용하여 스토리지를 모니터링할 수 있다고 말하지만 Vue 레이어에서는 이 작업을 수행할 것으로 예상하지 않습니다. 요약하면 이 경우는 사용할 수 있습니다. vuex.변수가 예측 가능해야 하고 콜백을 실행해야 합니다. 문제가 있다고 생각되면 EventBus 형제 구성 요소를 사용하여 통신하고 $emit는 $on 청취 콜백을 트리거합니다.

담배는 나중에

이 프로젝트의 초점은 풍부한 배경 구성 요소의 필요성이 아니라 권한 라우팅 제어 아이디어에 있습니다. 나중에 작업을 요약하기 위한 뼈대를 구축하는 것입니다. "프로젝트"가 더욱 실질적이고 강력해졌습니다.