Блог

После авторизации я записываю тип пользователя в состояние, на основе этого типа я хочу показать/скрыть некоторые маршруты.

src/store/index.js :

 import Vue from "vue";
import Vuex from "vuex";
import getters from "./getters";
import user from "./modules/user";

Vue.use(Vuex);

const store = new Vuex.Store({
  modules: { user },
  getters
});

export default store;
  

src/store/getters.js :

 const getters = {
  token: state => state.user.token,
  name: state => state.user.name,
  type: state => state.user.type
};

export default getters;
  

src/router/index.js :

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

import Layout from "@/layout";

Vue.use(Router);

export const constantRoutes = [
  {
    path: "/login",
    component: () => import("@/views/Login"),
    hidden: true
  },
  {
    path: "/",
    component: Layout,
    redirect: "/dashboard",
    children: [
      {
        path: "dashboard",
        name: "Dashboard",
        component: () => import("@/views/Dashboard"),
        meta: { title: "routes.dashboard", icon: "el-icon-odometer" }
      }
    ]
  },
  {
    path: "/providers",
    component: Layout,
    redirect: "/providers/list",
    name: "Providers",
    meta: { title: "routes.providers", icon: "el-icon-suitcase-1" },
    children: [
      {
        path: 'list',
        name: "List",
        component: () => import("@/views/providers/ProvidersList"),
        meta: { title: "routes.providersList", icon: "el-icon-document" }
      }
    ]
  }
];

const createRouter = () =>
  new Router({
    scrollBehavior: () => ({ y: 0 }),
    routes: constantRoutes
  });

const router = createRouter();

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

export default router;
  

Управление авторизацией в отдельном файле src/permission.js :

 import router from "./router";
import store from "./store";
import { Message } from "element-ui";
import NProgress from "nprogress";
import "nprogress/nprogress.css";
import { getToken } from "@/utils/auth";
import getPageTitle from "@/utils/get-page-title";

NProgress.configure({ showSpinner: false });

const whiteList = ["/login"];

router.beforeEach(async (to, from, next) => {
  NProgress.start();
  document.title = getPageTitle(to.meta.title);
  const hasToken = getToken();

  if (hasToken) {
    if (to.path === "/login") {
      next({ path: "/" });
      NProgress.done();
    } else {
      const hasGetUserInfo = store.getters.name;
      if (hasGetUserInfo) {
        next();
      } else {
        try {
          await store.dispatch("user/getInfo");
          next();
        } catch (error) {
          await store.dispatch("user/resetToken");
          Message.error(error || "Has Error");
          next(`/login?redirect=${to.path}`);
          NProgress.done();
        }
      }
    }
  } else {
    if (whiteList.indexOf(to.path) !== -1) {
      next();
    } else {
      next(`/login?redirect=${to.path}`);
      NProgress.done();
    }
  }
});

router.afterEach(() => {
  NProgress.done();
});
  

Как вы можете видеть, весь код представляет собой набор решений для копирования и вставки, найденных где-то, и теперь я полностью застрял. Как я могу скрыть и запретить доступ к определенным маршрутам для пользователей с разными state.user.type ?

Преобразование моего комментария в ответ.

Возможно, будет проще (для вас) использовать существующее (и проверенное) решение — что-то вроде Vue-ACL или даже более продвинутое.