This is the second day of my participation in the November Gwen Challenge. Check out the details: the last Gwen Challenge 2021

Project introduction

In the last two months, I completed a company’s large-screen display project, from which I gained a lot of experience. The project mainly involves the following aspects: user-centric access and authentication, persistent storage, responsive design, componentization and micro-application, etc.

Problems encountered

  • Page permission determination (persistent storage of permission trees,vuexAfter the refresh, the status is lost and requires auxiliary uselocalstorage)
  • Opening a new TAB automatically jumps to the login pagetoken, but usedsessionstorage)
  • Page closed and re-opened without logging before accessing the page (again persistent storage problem)

Technology stack

  • Build tools @vue/ CLI
  • Status management: VUEX
  • Routing: the vue – the router
  • UI framework view – the design
  • Postcss plugin: PostCSS-px2REM
  • CSS pre-processing language: less
  • Code specification: ESLint

Add scalable layout schemes

    ! function (window) {
      /* Design document width */
      var docWidth = 1920;
      var doc = window.document,
        docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
      var recalc = (function refreshRem() {
        var clientWidth = docEl.getBoundingClientRect().width;
        docEl.style.fontSize = Math.max(Math.min(20 * (clientWidth / docWidth), 30), 8.55) * 5 + 'px';
        returnrefreshRem; }) ();/* Add the double screen identifier, Android double screen is 1 */
      docEl.setAttribute('data-dpr'.window.navigator.appVersion.match(/iphone/gi)?window.devicePixelRatio : 1);
      if (/iP(hone|od|ad)/.test(window.navigator.userAgent)) {
        /* Add the IOS identifier */
        doc.documentElement.classList.add('ios');
        /* IOS8 adds hairline style to HTML for special handling */
        if (parseInt(window.navigator.appVersion.match(/OS (\d+)_(\d+)_? (\d+)? /) [1].10) > =8)
          doc.documentElement.classList.add('hairline');
      }

      if(! doc.addEventListener)return;
      window.addEventListener(resizeEvt, recalc, false);
      doc.addEventListener('DOMContentLoaded', recalc, false); } (window);
Copy the code

The flex layout is used primarily in the project. Because the design draft is 1080 * 1920 size, it also needs to be compatible with the display on the computer, and the height of the display on the computer is not up to 1080, excluding favorites and other contents. This part mainly uses THE CSS VH unit and calc() method to calculate.

Postcss is also used to unify the global units into REM.

Global configuration

Global configuration involves permission controls, common styles, and common components

1. Permission control is divided into:

  • Login permissions
  • Page permissions (Menu permissions + button permissions)
  • Interface permissions

Login permissions

Login access permission control is used to verify users. After the user logs in successfully, the backend returns a token, which the front-end carries with it every time it makes an interface request. After getting the token, the backend judges that if the token does exist and has not expired, it can be accessed. If the token does not exist or has expired, the login page is displayed, asking the user to log in to obtain the token again.

First we call the login interface, after successful call we can get the token in the returned data, we store the token in localStorage (must not use sessionStorage, because sessionStorage can only be used in the current window, When we open a new TAB, we will not get the token, so we cannot determine whether we have logged in. After our request in axios interceptor service. The interceptors. Request. Use will be token into the request header

    thisConfig.headers = {
      'Content-Type': 'application/json; charset=utf-8'.Authorization: window.localStorage.getItem('storagetoken'),};Copy the code

Page Permissions:

When we log in, we can obtain the user role permission tree through the interface. Here, we use vuex + LocalStorage to store the user permission tree persistently. Then we show the permission tree. If the user is forced to access a page without permission through the URL, check the permission in router.beforeeach (). If the user has no permission, the user is directly redirected to the 404 page.

Menu whitelist configuration:

We can use the meta attribute of the route to add whitelisted permissions to the page. If the meta set the current page to be accessible to all, we can jump to the page without checking whether the page has permissions

Button permissions:

  • 1. Each module should have four permissions: Query (GET), add (POST), update (PUT) and delete (delete).

  • 2. Use decimal and binary to represent the permissions of the current module. 1111(15), the relationship between the transformed binary and the permission is expressed as follows: from right to left (1 indicates that the permission is owned, 0 indicates that the permission is not owned), the first digit represents query, the second digit represents add, the third digit represents update, and the fourth digit represents delete. For example, eg: binary 1111(15), on behalf of the query, add, update, delete four permissions.

  • 3. If the corresponding module does not have the permission, remove the DOM element of the current button.

Interface permissions:

Finally, with request control as the last line of defense, the route may be misconfigured, and the button may forget to add permissions. In this case, request control can be used as a backstop, and the unauthorized request will be blocked at the front end.

2. Common styles

Common styles are primarily concerned with

  • Font size
  • System primary color and background color
  • The global variable

3. Common components

Designing common components requires us to read the UI design diagram carefully and extract the appropriate common components. These components can be divided into partial logic components and partial style components, we need to use experience to design components according to the design diagram.

In fact, it is similar to pulling out the common part of the code, do not design the component in too much detail, so it is particularly troublesome to use, the best is to maximize the completion of an independent functional module.

This part can be seen in this article: Modern Web development dilemmas and Breakdowns – Niu Dai’s article – Zhihu

At the end

At this point we can deal with the main issues above, which are persistent storage and permission determination. In addition, there are other gains from the project, which I will talk about next time.