Summary of common problems and solutions in Vue (recommended)

There are some issues that are not limited to Vue, but also apply to other types of SPA projects.

1. Page permission control and login verification page permission control

What does page permission control mean?

That is, a website has different roles, such as administrators and ordinary users, and different roles are required to access different pages. If a role has unauthorized access to a page, restrictions must be imposed.

One way is to control by dynamically adding routes and menus. Inaccessible pages are not added to the routing table. This is one of the ways. See the next section "Dynamic Menu" for details.

Another way is to put all the pages in the routing table, but just judge the role permissions when accessing. If you have permission, access is allowed. If you don't have permission, access is denied and the request is redirected to the 404 page.

Ideas

In the meta attribute of each route, add the roles that can access the route to roles. After each user logs in, the user's role is returned. Then when accessing the page, the meta attribute of the route is compared with the user's role. If the user's role is in the roles of the route, then access is allowed. If not, access is denied.

Code Sample

Routing Information

routes: [
 {
 path: '/login',
 name: 'login',
 meta: {
 roles: ['admin', 'user']
 },
 component: () => import('../components/Login.vue')
 },
 {
 path: 'home',
 name: 'home',
 meta: {
 roles: ['admin']
 },
 component: () => import('../views/Home.vue')
 },
]

Page Control

// Assume there are two roles: admin and user
//Here is the user role obtained from the background const role = 'user'
// The router.beforeEach event is triggered before entering a page router.beforeEach((to, from, next) => {
 if (to.meta.roles.includes(role)) {
 next()
 } else {
 next({path: '/404'})
 }
})

Login verification

Generally, once you log in to a website once, you can access other pages of the website directly without logging in again. We can do this through tokens or cookies. The following code shows how to use tokens to control login verification.

router.beforeEach((to, from, next) => {
 // If there is a token, it means the user has logged in if (localStorage.getItem('token')) {
 // If you are logged in, accessing the login page will redirect to the home page if (to.path === '/login') {
 next({path: '/'})
 } else {
 next({path: to.path || '/'})
 }
 } else {
 // If you are not logged in, any page you visit will be redirected to the login page if (to.path === '/login') {
 next()
 } else {
 next(`/login?redirect=${to.path}`)
 }
 }
})

2. Dynamic Menu

When writing a backend management system, it is estimated that many people have encountered such a requirement: dynamically adding routes and menus based on background data. Why do this? Because different users have different permissions, the pages they can access are different.

Dynamically adding routes

Routes can be added dynamically using the addRoutes method of vue-router.

Let’s take a look at the official introduction first:

router.addRoutes

router.addRoutes(routes: Array<RouteConfig>)

Add more routing rules dynamically. The argument must be an array conforming to routes option requirements.

For example:

const router = new Router({
 routes: [
 {
  path: '/login',
  name: 'login',
  component: () => import('../components/Login.vue')
 },
 {path: '/', redirect: '/home'},
 ] 
})

The above code has the same effect as the following code

const router = new Router({
 routes: [
 {path: '/', redirect: '/home'},
 ] 
})

router.addRoutes([
 {
 path: '/login',
 name: 'login',
 component: () => import('../components/Login.vue')
 }
])

In the process of dynamically adding routes, if there is a 404 page, it must be added last, otherwise it will redirect to the 404 page after adding the page during login.

Similar to this, this rule must be added last.

{path: '*', redirect: '/404'}

Dynamically generated menu

Assume that the data returned from the background looks like this:

// Left menu bar data menuItems: [
 {
 name: 'home', // The name of the route to jump to is not the path size: 18, // icon size type: 'md-home', // icon type text: 'Homepage' // text content },
 {
 text: 'Secondary Menu',
 type: 'ios-paper',
 children: [
  {
  type: 'ios-grid',
  name: 't1',
  text: 'Table'
  },
  {
  text: 'Level 3 menu',
  type: 'ios-paper',
  children: [
   {
   type: 'ios-notifications-outline',
   name: 'msg',
   text: 'View message'
   },
  ]
  }
 ]
 }
]

Let’s see how to convert it into a menu bar. I used the iview component here to avoid reinventing the wheel.

<!-- Menu Bar -->
<Menu ref="asideMenu" theme="dark" width="100%" @on-select="gotoPage" 
accordion :open-names="openMenus" :active-name="currentPage" @on-open-change="menuChange">
 <!-- Dynamic Menu -->
 <div v-for="(item, index) in menuItems" :key="index">
 <Submenu v-if="item.children" :name="index">
  <template slot="title">
  <Icon :size="item.size" :type="item.type"/>
  <span v-show="isShowAsideTitle">{{item.text}}</span>
  </template>
  <div v-for="(subItem, i) in item.children" :key="index + i">
  <Submenu v-if="subItem.children" :name="index + '-' + i">
   <template slot="title">
   <Icon :size="subItem.size" :type="subItem.type"/>
   <span v-show="isShowAsideTitle">{{subItem.text}}</span>
   </template>
   <MenuItem class="menu-level-3" v-for="(threeItem, k) in subItem.children" :name="threeItem.name" :key="index + i + k">
   <Icon :size="threeItem.size" :type="threeItem.type"/>
   <span v-show="isShowAsideTitle">{{threeItem.text}}</span>
   </MenuItem>
  </Submenu>
  <MenuItem v-else v-show="isShowAsideTitle" :name="subItem.name">
   <Icon :size="subItem.size" :type="subItem.type"/>
   <span v-show="isShowAsideTitle">{{subItem.text}}</span>
  </MenuItem>
  </div>
 </Submenu>
 <MenuItem v-else :name="item.name">
  <Icon :size="item.size" :type="item.type" />
  <span v-show="isShowAsideTitle">{{item.text}}</span>
 </MenuItem>
 </div>
</Menu>

You don't need to look at the code too carefully, just understand the principle. In fact, it just loops the sub-array three times through v-for to generate a three-level menu.

However, this dynamic menu has a flaw, which is that it only supports three-level menus. A better approach is to encapsulate the process of generating menus into a component and then call it recursively, so that an unlimited number of menus can be supported. When creating a menu, you need to determine whether there are submenus. If so, call the component recursively.

As mentioned above, dynamic routing is implemented using addRoutes. Now let’s see how to do it specifically.

First, list all the page routes of the project, and then use the data returned by the background to dynamically match them. If there is a match, add the route, otherwise don't add it. Finally, add the newly generated routing data to the routing table using addRoutes.

const asyncRoutes = {
 'home': {
 path: 'home',
 name: 'home',
 component: () => import('../views/Home.vue')
 },
 't1': {
 path: 't1',
 name: 't1',
 component: () => import('../views/T1.vue')
 },
 'password': {
 path: 'password',
 name: 'password',
 component: () => import('../views/Password.vue')
 },
 'msg': {
 path: 'msg',
 name: 'msg',
 component: () => import('../views/Msg.vue')
 },
 'userinfo': {
 path: 'userinfo',
 name: 'userinfo',
 component: () => import('../views/UserInfo.vue')
 }
}

// Pass in background data to generate routing table menusToRoutes(menusData)

// Convert menu information into corresponding route information and add dynamically function menusToRoutes(data) {
 const result = []
 const children = []

 result.push({
 path: '/',
 component: () => import('../components/Index.vue'),
 children,
 })

 data.forEach(item => {
 generateRoutes(children, item)
 })

 children.push({
 path: 'error',
 name: 'error',
 component: () => import('../components/Error.vue')
 })

 // Finally add the 404 page, otherwise it will jump to the 404 page after successful login result.push(
 {path: '*', redirect: '/error'},
 )

 return result
}

function generateRoutes(children, item) {
 if (item.name) {
 children.push(asyncRoutes[item.name])
 } else if (item.children) {
 item.children.forEach(e => {
  generateRoutes(children, e)
 })
 }
}

The code implementation of the dynamic menu is placed on github, in the src/components/Index.vue , src/permission.js and src/utils/index.js files of this project.

3. Forward refreshes, backward does not refresh. Requirement 1:

In a list page, when entering for the first time, request to obtain data.

When you click a list item, jump to the details page, and then return to the list page from the details page, the page will not be refreshed.

That is to say, when entering the list page from other pages, you need to refresh to obtain data, and do not refresh when returning to the list page from the detail page.

Solution

In App.vue setup:

 <keep-alive include="list">
  <router-view/>
 </keep-alive>

Assume that the list page is list.vue and the detail page is detail.vue, both of which are subcomponents.

We add the name of the list page in keep-alive and cache the list page.

Then add an ajax request in the create function of the list page, so that data will only be requested when entering the list page for the first time. When jumping from the list page to the details page and then back from the details page, the list page will not be refreshed. This will solve the problem.

Requirement 2:

On the basis of requirement one, another requirement is added: the corresponding list item can be deleted in the details page. At this time, when returning to the list page, it is necessary to refresh and re-acquire the data.

We can add a meta attribute to detail.vue in the routing configuration file.

 {
  path: '/detail',
  name: 'detail',
  component: () => import('../view/detail.vue'),
  meta: {isRefresh: true}
 },

This meta attribute can be read and set in the details page through this.$route.meta.isRefresh .

After setting this property, you also need to set the watch $route property in the App.vue file.

 watch:
 $route(to, from) {
  const fname = from.name
  const tname = to.name
  if (from.meta.isRefresh || (fname != 'detail' && tname == 'list')) {
  from.meta.isRefresh = false
 // Re-request data here}
 }
 },

In this way, there is no need to use ajax to request data in the create function of the list page, and all processing can be done in App.vue.

There are two conditions to trigger the request data:

When the list comes in from other pages (except the details page), data needs to be requested. When returning from the detail page to the list page, if the isRefresh in the detail page meta attribute is true, you also need to re-request data.

When we delete the corresponding list item in the details page, we can set the isRefresh in the meta attribute of the details page to true. At this time, return to the list page and the page will be refreshed.

Solution 2

There is actually a simpler solution for requirement 2, which is to use key attribute of router-view.

<keep-alive>
 <router-view :key="$route.fullPath"/>
</keep-alive>

First, keep-alive allows all pages to be cached. When you don't want to cache a certain route page and want to reload it, you can pass a random string when jumping so that it can be reloaded. For example, if you enter the details page from the list page, and then delete an option in the list page, you need to refresh when you return to the list page from the details page. We can jump like this:

this.$router.push({
 path: '/list',
 query: { 'randomID': 'id' + Math.random() },
})

This solution is relatively simpler.

4. Display and close loading under multiple requests

Generally, in Vue, the interceptor of axios is used to control the display and closing of loading, as follows:

Configure a global loader in App.vue.

 <div class="app">
  <keep-alive :include="keepAliveData">
   <router-view/>
  </keep-alive>
  <div class="loading" v-show="isShowLoading">
   <Spin size="large"></Spin>
  </div>
 </div>

Also set up the axios interceptor.

 // Add request interceptor this.$axios.interceptors.request.use(config => {
  this.isShowLoading = true
  return config
 }, error => {
  this.isShowLoading = false
  return Promise.reject(error)
 })

 // Add response interceptor this.$axios.interceptors.response.use(response => {
  this.isShowLoading = false
  return response
 }, error => {
  this.isShowLoading = false
  return Promise.reject(error)
 })

The function of this interceptor is to turn on loading before the request and turn off loading when the request ends or an error occurs.

This works fine if there is only one request at a time. But if there are multiple concurrent requests, there will be problems.

Example:

If two requests are initiated at the same time, before the request, the interceptor this.isShowLoading = true will turn on loading.

Now one request is closed. this.isShowLoading = false interceptor turns off loading, but the other request does not end for some reason.

The consequence is that the page request has not been completed, but the loading is turned off. The user will think that the page loading has been completed. As a result, the page cannot run normally, resulting in a poor user experience.

Solution

Add a loadingCount variable to count the number of requests.

loadingCount: 0

Add two more methods to increase and decrease loadingCount.

 methods: {
  addLoading() {
   this.isShowLoading = true
   this.loadingCount++
  },

  isCloseLoading() {
   this.loadingCount--
   if (this.loadingCount == 0) {
    this.isShowLoading = false
   }
  }
 }

Now the interceptor looks like this:

  // Add request interceptor this.$axios.interceptors.request.use(config => {
   this.addLoading()
   return config
  }, error => {
   this.isShowLoading = false
   this.loadingCount = 0
   this.$Message.error('Network exception, please try again later')
   return Promise.reject(error)
  })

  // Add response interceptor this.$axios.interceptors.response.use(response => {
   this.isCloseLoading()
   return response
  }, error => {
   this.isShowLoading = false
   this.loadingCount = 0
   this.$Message.error('Network exception, please try again later')
   return Promise.reject(error)
  })

The functions of this interceptor are:

Every time a request is initiated, loading is turned on and loadingCount is incremented by 1.

Every time a request ends, loadingCount is reduced by 1, and it is determined whether loadingCount is 0. If it is 0, loading is closed.

This can solve the problem that one of the multiple requests ends early, causing the loading to close.

5. Form printing

The component needed for printing is print-js

Normal form printing

For general table printing, you can just follow the examples provided by the component.

printJS({
 printable: id, // DOM id
 type: 'html',
 scanStyles: false,
})

element-ui table printing (the same applies to tables in other component libraries)

The element-ui table appears to be one table, but is actually composed of two tables.

The header is a table, and the body is another table, which leads to a problem: the body and header are misaligned when printing.

In addition, when a scroll bar appears in the table, it will also cause misalignment.

Solution

My idea is to combine the two tables into one table. When the print-js component prints, it actually extracts the content in the DOM corresponding to the id and prints it. Therefore, before passing in the id, you can extract the table content where the header is located and insert it into the second table, so as to merge the two tables. At this time, there will be no misalignment problem when printing.

function printHTML(id) {
 const html = document.querySelector('#' + id).innerHTML
 // Create a new DOM
 const div = document.createElement('div')
 const printDOMID = 'printDOMElement'
 div.id = printDOMID
 div.innerHTML = html

 // Extract the contents of the first table, i.e. the header const ths = div.querySelectorAll('.el-table__header-wrapper th')
 const ThsTextArry = []
 for (let i = 0, len = ths.length; i < len; i++) {
  if (ths[i].innerText !== '') ThsTextArry.push(ths[i].innerText)
 }

 // Delete the extra header div.querySelector('.hidden-columns').remove()
 // The content of the first table is no longer useful after extraction. Delete div.querySelector('.el-table__header-wrapper').remove()

 // Insert the contents of the first table into the second table let newHTML = '<tr>'
 for (let i = 0, len = ThsTextArry.length; i < len; i++) {
  newHTML += '<td style="text-align: center; font-weight: bold">' + ThsTextArry[i] + '</td>'
 }

 newHTML += '</tr>'
 div.querySelector('.el-table__body-wrapper table').insertAdjacentHTML('afterbegin', newHTML)
 // Add the new DIV to the page and then delete it after printing document.querySelector('body').appendChild(div)
 
 printJS({
  printable: printDOMID,
  type: 'html',
  scanStyles: false,
  style: 'table { border-collapse: collapse }' // table style})

 div.remove()
}

6. Download the binary file

There are usually two ways to download files on the front end. One is to provide a URL in the background and then use window.open(URL) to download it. The other is for the background to directly return the binary content of the file, and then the front end converts it before downloading it.

Since the first method is relatively simple, it will not be discussed here. This article mainly explains how to implement the second method.

The second method requires the use of a Blob object, which is described in the mdn documentation as follows:

A Blob object represents an immutable, raw file-like object. Blob does not necessarily represent data in JavaScript native format

Specific usage

axios({
 method: 'post',
 url: '/export',
})
.then(res => {
 // Assume data is the returned binary data const data = res.data
 const url = window.URL.createObjectURL(new Blob([data], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"}))
 const link = document.createElement('a')
 link.style.display = 'none'
 link.href = url
 link.setAttribute('download', 'excel.xlsx')
 document.body.appendChild(link)
 link.click()
 document.body.removeChild(link)
})

Open the downloaded file to see if the result is correct.

A bunch of gibberish...

Something must be wrong.

Finally, it was found that the problem was with the parameter responseType, which indicates the data type of the server response. Since the data returned from the backend is binary data, we need to set it to arraybuffer, and then see if the result is correct.

axios({
 method: 'post',
 url: '/export',
 responseType: 'arraybuffer',
})
.then(res => {
 // Assume data is the returned binary data const data = res.data
 const url = window.URL.createObjectURL(new Blob([data], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"}))
 const link = document.createElement('a')
 link.style.display = 'none'
 link.href = url
 link.setAttribute('download', 'excel.xlsx')
 document.body.appendChild(link)
 link.click()
 document.body.removeChild(link)
}) 

There is no problem this time, the file can be opened normally, and the content is also normal, no longer garbled.

Decide whether to download the file based on the background interface content

The author's project has a large number of pages that require downloading files, and this requirement is a bit abnormal.

The specific requirements are as follows

• If the number of data items in the downloaded file meets the requirements, it will be downloaded normally (the download data limit for each page is different, so it cannot be hard-coded in the front end).
• If the file is too large, the backend returns { code: 199999, msg: 'The file is too large, please reset the query items', data: null }, and then the frontend reports an error.
  

Let's analyze it first. First of all, according to the above, we all know that the interface response data type for downloading files is arraybuffer. Regardless of whether the returned data is a binary file or a JSON string, what the front end receives is actually an arraybuffer. So we need to make a judgment on the content of arraybuffer, convert it into a string when receiving data, and check whether there is code: 199999. If there is, an error message will be given. If not, it is a normal file and can be downloaded. The specific implementation is as follows:

xios.interceptors.response.use(response => {
  const res = response.data
  // Determine whether the response data type is ArrayBuffer, true is the file download interface, false is the normal interface if (res instanceof ArrayBuffer) {
    const utf8decoder = new TextDecoder()
    const u8arr = new Uint8Array(res)
    // Convert binary data to string const temp = utf8decoder.decode(u8arr)
    if (temp.includes('{code:199999')) {
      Message({
       // Convert string to JSON object message: JSON.parse(temp).msg,
        type: 'error',
        duration: 5000,
      })

      return Promise.reject()
    }
  }
  // Normal type interface, code omitted...
  return res
}, (error) => {
  // Code omitted...
  return Promise.reject(error)
})

7. Automatically ignore console.log statements

export function rewirteLog() {
  console.log = (function (log) {
    return process.env.NODE_ENV == 'development'? log : function() {}
  }(console.log))
}

Import this function in main.js and execute it once to ignore the console.log statement.

Summarize

This is the end of this article about common problems and solutions in Vue. For more related Vue FAQs, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!