CODEWITHSUNDEEP
javascriptvue.jsvuejs2
kshnkvn
kshnkvn

Reputation: 956

How to hide and deny access to some routes in VueJS with Store state?

After authorization, I write the user type to the state, based on this type, I want to show / hide some routes.

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;

Authorization control in a separate file 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();
});

As you can see all the code is a collection of copy-paste solutions found somewhere and now I'm completely stuck. How can I hide and deny access to certain routes for users with different state.user.type?

Upvotes: 1

Views: 1183

Answers (1)

IVO GELOV
IVO GELOV

Reputation: 14259

Converting my comment to answer.

Perhaps it will be easier (for you) to use an existing (and tested) solution - something like Vue-ACL or even more advanced.

Upvotes: 1

Related Questions