Table of contents

Application scenario:

There are often system permission judgments. For example, a certain page can only be accessed by role a, or multiple pages in a system have permission settings. It is judged whether the user can enter the page according to the user's permission. This kind of permission control should be relatively basic and common. . This time, I will record the permission control process I did before.

Development Process:

Mainly through the judgment before entering the page: router.beforeEach()

Controls implemented here, for example:

When entering the page, judge whether to log in, if not logged in, jump to the login page, if logged in, enter the project list page;

To enter the project details page, it is necessary to determine whether the user has permission;

such as above.

Detailed development process:

I added a permission.js page under the root directory file, and introduced it in main.js, and realized permission judgment with the help of router's routing interception function.

1. Introduce permission control file

The project structure is as follows:

Introduced in main.js

2. Detailed permission control

The following are the main operations of permission control in permission.

import router, { asyncRoutes } from '@/router'
import { getToken, setToken, removeToken } from '@/utils/auth'
import getPageTitle from '@/utils/getPageTitle'
//白名单
const whiteList = ['/login', '/404', '/401', '/500'] // no redirect whitelist
router.beforeEach(async (to, from, next) => {
  // set page title
  document.title = getPageTitle(to.meta.title)
  const hasToken = getToken()
  let path = to.path
  // 白名单中路由直接放行
  if (whiteList.includes(path)) {
    next()
    return
  }
//如果已登录，有token，则跳到重定向页面
  if (hasToken) {
    if (to.path === '/login') {
      // if is logged in, redirect to the home page
      next({ path: '/' })
    } 
    //在这里可以进行其他判断，如果已经登录，并且不是在登录页面，即在页面C，那么可以获取用户的角色权限 ，对用户是否能进入页面C进行判断
    else {
      next()
    }
   
  } else {
    //whiteList 里的内容不需要验签
    if (whiteList.indexOf(to.path) !== -1) {
      next()
    } else {
      //无登录token，重定向，登录后跳转
      if (to.query.token) {
        next(`/login?redirect=${to.path}?token=${to.query.token}`)
      } else {
         next(`/login`)
      }
      
    }
  }
})

router.afterEach(async (to, from, next) => {
  if (to.path === '/login') {

  } else {
    //调接口，记录日志
   //……
  }
})

Summarize:

In fact, the above mainly relies on the interception of routing guards to control permissions.

When recording this article, I also read several articles about routing guards,

For example:

Quickly learn about routing guards in five minutes http://t.csdn.cn/4DLqv Vue global routing guards (verify login status) http://t.csdn.cn/uY0d9

Three ways of writing route guards http://t.csdn.cn/yop8z

Permission judgment and redirection before the vue3 system enters the page