vue项目开发中，需要对页面进行判断，如果账号没有权限则提示账号权限不足，如果账号有权限则跳转到第一个有权限的页面。

这里在账号登录后，接口会返回一个菜单数据，这个数据就是我们的账号拥有的权限了。

这里我们通过menuId和路由的meta.id挂钩

[{"menuId":6,"parentId":0,"menuName":"Banner管理","menuType":"1","permission":"6","status":0,"remarks":null,"menuList":[],"show":0}]

路由

import Vue from 'vue'
import Router from 'vue-router'
import {Message} from 'element-ui'

Vue.use(Router)

function getMenu(id) {
  var list = JSON.parse(localStorage.getItem('menuList'))
  var isShow = false
  list.forEach((type) => {
    if (id === type.menuId) {
      isShow = true
    }
    if (type.menuList) {
      type.menuList.forEach((type2) => {
        if (id === type2.menuId) {
          isShow = true
        }
      })
    }
  })
  return isShow
}

/* Layout */
import Layout from '@/layout'

export const constantRoutes = [
  {
    path: '/login',
    component: () => import('@/views/login/index'),
    hidden: true
  },
  {
    path: '/banner',
    component: Layout,
    redirect: '/banner/banner',
    name: 'banner图管理',
    meta: {title: 'banner图管理', icon: 'el-icon-s-help', id: 6},
    children: [
      {
        path: 'banner',
        name: 'banner',
        component: () => import('@/views/banner/bannerList.vue'),
        meta: {title: 'banner图管理', icon: 'table', id: 6}
      }
    ]
  },
]

const createRouter = () => new Router({
  // mode: 'history', // require service support
  scrollBehavior: () => ({y: 0}),
  routes: constantRoutes
})

const router = createRouter()

export function resetRouter() {
  const newRouter = createRouter()
  router.matcher = newRouter.matcher // reset router
}

router.beforeEach((to, from, next) => {
  if (to.meta.id) {
    if (getMenu(to.meta.id)) {
      next()
    } else {
      next(from.path)
      Message({
        message: '当前用户没有查看权限',
        type: 'error',
        duration: 2 * 1000
      })
    }
  } else {
    next()
  }
})
export default router

登录处理

获取路由获取权限页面，进行比对，判断跳转。如果我们担心menuList数据会被篡改，我们还可以对这个菜单缓存进行加密。

 handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true
          this.$store.dispatch('user/login', this.loginForm).then((res) => {
            const menuList = JSON.parse(localStorage.getItem('menuList'))
            let allRouters = this.allRoutes
            if (!menuList || menuList.length === 0) {
              this.$message.error({
                message: '当前账号无权限',
                type: 'error',
                duration: 2 * 1000
              })
              this.loading = false
              return
            }
            // 比对 allRouters 和 menuList
            let matchedRoute = null;
            for (let route of allRouters) {
              if (route.meta && menuList.some(menu => menu.menuId === route.meta.id)) {
                matchedRoute = route;
                break;
              }
            }

            if (matchedRoute) {
              this.$router.push({ path: matchedRoute.path });
            } else {
              this.$message.error({
                message: '没有匹配的权限路由',
                type: 'error',
                duration: 2 * 1000
              });
            }

            this.loading = false
          }).catch(() => {
            this.loading = false
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }