vue-router权限解决方案

在使用vue做管理系统时通常会有有权限分级,普通用户和管理员用户等等的设置.

碰巧遇到了一个项目,具体分析分析.

//导入不同角色路由
import { userRouter } from './userRouter'
import { adminRouter } from './adminRouter'
//组合式api写法
import { createRouter, createWebHistory } from 'vue-router'


//取出权限判断是否为管理员
const isadmin: any = localStorage.getItem('isadmin')

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/login',
      component: () => import('@/views/login/index.vue')
    },
    {
      path: '/register',
      component: () => import('@/views/register/index.vue')
    },
    {
      path: '/:pathMatch(.*)',
      component: () => import('@/views/404/index.vue')
    }
  ]
})
//添加路由
if (Number(isadmin)) {
  router.addRoute(adminRouter)
} else {
  router.addRoute(userRouter)
}

在用户登录之后将权限存到localStorage当中根据根据不同的权限数字来动态的添加路由

普通用户路由

//用户路由规则的路由表
export const userRouter = {
  path: '/',
  name: 'abc',
  component: () => import('@/components/layout-v2/index.vue'),
  redirect: '/home',
  children: [
    {
      //首页
      path: 'home',
      component: () => import('@/views/home/index.vue'),
      meta: {
        title: '图书借阅平台-首页'
      }
    },
    {
      //个人中心
      path: 'user',
      component: () => import('@/views/user/index.vue'),
      meta: {
        title: '图书借阅平台-个人中心'
      }
    },
    {
      //图书借阅
      path: 'lending',
      component: () => import('@/views/book-lending/index.vue'),
      meta: {
        title: '图书借阅平台-图书借阅'
      }
    },
    {
      //图书归还
      path: 'restore',
      component: () => import('@/views/book-restore/index.vue'),
      meta: {
        title: '图书借阅平台-图书归还'
      }
    },
    {
      //图书检索
      path: 'search',
      component: () => import('@/views/booksearch/index.vue'),
      meta: {
        title: '图书借阅平台-图书借阅'
      }
    },
  ]
}

管理员的

//管理员路由规则
export const adminRouter = {
  path: '/',
  name: 'abc',
  component: () => import('@/components/layout/index.vue'),
  redirect: '/home',
  children: [
    {
      //首页
      path: 'home',
      component: () => import('@/views/home/index.vue'),
      meta: {
        title: '图书管理系统-首页'
      }
    },
    {
      //图书管理
      path: 'book',
      component: () => import('@/views/book-manage/index.vue'),
      meta: {
        title: '图书管理系统-图书管理'
      }
    },
    {
      //数据分析
      path: 'data',
      component: () => import('@/views/data/index.vue'),
      meta: {
        title: '图书管理系统-数据分析'
      }
    },
    {
      //个人中心
      path: 'user',
      component: () => import('@/views/user/index.vue'),
      meta: {
        title: '图书管理系统-个人中心'
      }
    },
    {
      //用户管理
      path: 'usermanage',
      component: () => import('@/views/user-manage/index.vue'),
      meta: {
        title: '图书管理系统-用户管理'
      }
    },
    {
      //类别管理
      path: 'category',
      component: () => import('@/views/category/index.vue'),
      meta: {
        title: '图书管理系统-类别管理'
      }
    },
    {
      //借阅管理
      path: 'adminborrow',
      component: () => import('@/views/admin-borrow/index.vue'),
      meta: {
        title: '图书管理系统-借阅记录'
      }
    }
  ]
}