CLWY权限管理（六）--- 权限实现

修改路由文件

在 src/router/index.js

import Vue from "vue";
import VueRouter from "vue-router";
import Layout from "@/views/layout/IndexView";

Vue.use(VueRouter);

const routes = [
  {
   
    path: "/sign_in",
    component: () => import("@/views/auth/SignIn"),
    meta: {
    title: "登录" },
  },
  // 无权限访问
  {
   
    path: "/401", 
    component: () => import("@/views/error-page/Page401View"),
    meta: {
    title: "401" },
  },
  {
   
    path: "/",
    component: Layout,
    children: [
      {
   
        path: "",
        component: () => import("@/views/HomeView"),
        meta: {
    title: "首页" },
      },
      {
   
        path: "/users",
        component: () => import("@/views/users/ListView"),
        meta: {
    title: "用户列表" },
      },
      {
   
        path: "/users/create",
        component: () => import("@/views/users/CreateView"),
        meta: {
    title: "新增用户" },
      },
      {
   
        path: "/users/edit/:id",
        component: () => import("@/views/users/EditView"),
        meta: {
    title: "编辑用户" },
      },
      {
   
        path: "/roles",
        component: () => import("@/views/roles/ListView"),
        meta: {
    title: "用户组列表" },
      },
      {
   
        path: "/roles/create",
        component: () => import("@/views/roles/CreateView"),
        meta: {
    title: "新增用户组" },
      },
      {
   
        path: "/roles/edit/:id",
        component: () => import("@/views/roles/EditView"),
        meta: {
    title: "编辑用户组" },
      },
      {
   
        path: "/permissions",
        component: () => import("@/views/permissions/ListView"),
        meta: {
    title: "菜单与权限列表" },
      },
    ],
  },
];

const router = new VueRouter({
   
  mode: "history",
  base: process.env.BASE_URL,
  routes,
});

export default router;

创建401组件

新建 views/error-page/Page401View.vue

<template>
  <div class="errPage-container"></