如何在vue.js中根据自定义权限授予访问路由的权限？

// router.js

import Vue from 'vue';
import Router from 'vue-router';

Vue.use(Router);

const router = new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home,
      meta: { permission: 'admin' } // 设置需要admin权限才能访问的路由
    },
    {
      path: '/about',
      name: 'About',
      component: About,
      meta: { permission: 'user' } // 设置需要user权限才能访问的路由
    },
    // 其他路由...
  ]
});

router.beforeEach((to, from, next) => {
  const requiredPermission = to.meta.permission; // 获取路由的权限要求
  const userPermission = getUserPermission(); // 获取用户的权限

  if (requiredPermission && requiredPermission !== userPermission) {
    // 如果用户权限不满足要求，则重定向到其他页面或者显示权限不足的提示信息
    next('/unauthorized');
  } else {
    next(); // 用户权限满足要求，继续访问路由
  }
});

export default router;