VPC

VPC

Vue permission Control

Project description

A backend system for unified login front-end user rights management developed based on vue

Project address

• dave-wind

Build

 # 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

Project analysis

Basic idea

Conceive

The front-end does permission control, which is nothing more than transmitting data to the background. The front-end makes judgments. I have seen that most projects have the concept of roles. The front-end makes a fuss about router. The concept of roles that need to be decoupled is artificially proposed. In fact, the front end only looks at the data and extracts the permissions. Different identity roles are given to the front end into different arrays and then matched with all local routes to return a menu to display to the user.

skeleton

After vue-cli initializes the project, it is composed of modular skeleton components: Login + Home Header Sidebar Home and the business content can be placed in Hoem content.

Log in

VPC is suitable for unified login of multiple projects. The valid token returned after successful login on the Login page is performed in the second step to obtain user data. The data is saved in vuex. Considering the refresh problem, obtaining user data must be placed in the root component App.vue. Because Vue is a one-way flow idea, Login, as a subcomponent of the App, needs to $emit to the App after successful login and execute callback to obtain user data.

Interface mock

As mentioned above, this project uses easy-mock mock data. The back-end data regulations use the RestFul protocol to mock multiple users with different identities. Successful login returns 200, token invalidation 401. Successful login returns token. Add token in the header through flyio. Remember this is the first time. After adding it to the Login page, you need to add a token for each interface call, which can be done in the flyio interceptor.

User data operations

Return the permission array on the App page through recursive fullPath. All local routing operations obtain the user's effective route and save it in Vuex.

Page display

In the Sidebar for loop, the effective route stored in vuex is displayed and the Home component is displayed to display the specific content of the route.

design composition

structure

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

project module

login

• The project is suitable for unified login with multiple back-end systems. One entrance login interface is a normal password login. The token is returned and stored in Authorization.
• In App.vue, which is the root component router-view, accept the sub-component $emit and then execute the login method to call the interface to obtain the permission data uniformly and complete it in the App.

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

Unified clear function

The code adheres to the purpose of one entrance and one exit.

• Clear the token and refresh the page after the header component logout is executed.
• Because we will determine whether there is a token in the root component App, there is no need for routing jumps in the logout.
• As long as login.vue is initialized, clearData is executed to clear all data.

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

token invalid

Flyio global interception response will jump back to the login page as long as the invalid user accesses the page and calls the interface failure status code and returns 401.

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

flyio

• flyio is great. VPC can be used in different environments of browser node and mobile applets. In webpack.base.conf.js, the import configuration is as follows. The import is correct.
• Flyio uses the wx package module in the mini program. For details, please see the official website or mpvue-netBar.

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

• There is no jsonp method in flyio's personal test. Currently, the cross-domain solution is to set Access-Control-Allow-Origin: '*' in the header on the backend.
• This project uses ajax jsonp (are we back to the era of writing jquery? jquery is really powerful!!)

Component registration

webpack artifact require.context

• Use require.context to read the components under the specified path. For example, we need to write a lot of public UI components, but it is very troublesome to import them every time, so use it.
• The effect is that the automatic dynamic require component requires three parameters: whether the file directory to be searched is to be searched for its subdirectories and a regular expression, and that's it.

Packaging optimization

• npm run build --report can analyze the dist package size to gradually destroy the damn file
• Change config index.js productionSourceMap and cssSourceMap to false in order to kill the damn map file.
• After npm install --save-dev compression-webpack-plugin, set productionGzip to true and enable Yasuo mode. Compression will also reduce the size. You might as well try it.
• Asynchronous components, but to tell you the truth, asynchronous components cannot optimize the dist size much.
• cdn externally loaded resources webpack.base.conf.js plus externals (although I misspell it every time)

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

• Then load the cdn resource in the index. Remember that Vue.use cannot be written in the code of all externals cars. Otherwise, cdn loading is nonsense because Vue.use is the plug-in written by Vue and will be mounted on the Vue prototype.

Automatic deployment

For details, please visit the travis CI official website. Note:

• The webpack configuration needs to be modified in the config index.js built-in VPC to assetsPublicPath: '' instead of the root directory '/' otherwise js will be 404
• The specific travis-CI configuration results are different. For details, please see the official website or follow the VPC .travis.yml configuration.

technical analysis

Vue component communication usage analysis

1.Vuex: State management mode, centralized storage management of the state of all components of the application, and corresponding rules to ensure that the state changes in a predictable way 2.EventBus: Communication of non-parent and child components uses event centers to allow components Free communication case reproduction: What should I do when, for example, I change a variable attribute value in the Header component in this project and require the SideBar and Home components to respond to the change? 3. Analysis: Vuex, as the name suggests, manages global variables. Here it is management, not read-only, which is readable, changeable and detectable. Vue is a one-way flow. First, let’s introduce the two attributes of ECMAScript: data attributes and accessor attributes. The former: [Configurable], [[Enumerable], [Writable], [Value] Configurable, enumerable, overridable value Usually object literal creates object var person = { name: "dave" } That is, what the data attributes change and read is only the value of the object, and the latter accessor properties [Configurable]], [[Enumerable]], [[Get]], [[Set], in JavaScript we use Object.defineProperty to define access To obtain this.person in Vue, the device attribute is to call the get method to set it, which is the set method. Vue has its own data tree. It is through the accessor attribute that dependency tracking watch is implemented. In addition to Vuex EventBus, Vue.prototype.xx and this.$root and local storage localStorage operation component variables do not have the watch function.

4. Summary: Vue.prototype.xx, this.$root can only be read and changed. You can modify and read on the Vue prototype but cannot watch. Vue.prototype.xx can write global variables for calibration and verification by default. Values ​​etc. operate on localStorage as well. It can read settings. Some people say that you can use addEventListener to monitor storage, but you do not expect to do this in the Vue layer. The token of this project is to use local storage. In summary, this case can be used in vuex. We need the variables to be predictable and then execute the callback. If you think If you are in trouble, just use EventBus sibling components to communicate, and $emit triggers the $on listening callback.

A cigarette afterwards

The focus of this project is not on the need for rich background components but on the idea of ​​permission routing control. It is just building a skeleton to summarize your work. Later, more encapsulated components will be added to the project to make the "project" more substantial and robust.