草庐IT

从0实现后台管理系统的权限处理

扶得一人醉如苏沐晨 2023-09-28 原文

一、路由配置（router-----index.js）

import Vue from "vue";
import VueRouter from "vue-router";
import Layout from "@/views/Layout";
import Login from "@/views/Login";
import Home from "@/views/Home";
// 物品管理
import GoodsMgr from "@/views/GoodsMgr";
import List from "@/views/GoodsMgr/List";
import Catagory from "@/views/GoodsMgr/Catagory";
// 订单管理
import OrderMgr from "@/views/OrderMgr";
import OrderList from "@/views/OrderMgr/OrderList";
import Collect from "@/views/OrderMgr/Collect";
// 系统管理
import System from "@/views/System";
import Dept from "@/views/System/Dept";
import Role from "@/views/System/Role";
import User from "@/views/System/User";

Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    component: Layout,
    children: [
      { path: "/", name: "home", component: Home },
      {
        path: "/goods",
        name: "goods",
        component: GoodsMgr,
        children: [
          { path: "list", name: "list", component: List },
          {
            path: "catagory",
            name: "catagory",
            component: Catagory,
          },
        ],
      },
      {
        path: "/order",
        name: "order",
        component: OrderMgr,
        children: [
          { path: "list", name: "list", component: OrderList },
          {
            path: "collect",
            name: "collect",
            component: Collect,
          },
        ],
      },
      {
        path: "/system",
        name: "system",
        component: System,
        children: [
          { path: "dept", name: "dept", component: Dept },
          {
            path: "role",
            name: "role",
            component: Role,
          },
          {
            path: "user",
            name: "user",
            component: User,
          },
        ],
      },
    ],
  },
  {
    path: "/login",
    name: "login",
    component: Login,
  },
];

const router = new VueRouter({
  routes,
});

export default router;

二、权限控制

2.1、在路由配置中文layout路由添加元信息

(layout下面的所有子路由都需要认证)

{
    path: "/",
    meta: {
      isAuth: true,
    },
    component: Layout,
    children: [{ path: "/", name: "home", component: Home }],
  },

2.2、在router文件夹下面新建permission.js文件

import router from "./index";
import store from "@/store";

// 全局导航守卫
router.beforeEach((to, from, next) => {
  // 在匹配到的路由数组中，如果没有找到需要权限的直接放行
  if (to.matched.length && !to.matched.some((item) => item.isAuth)) {
    next();
  } else {
    //判断是否已经登录
    let token = store.state.userinfo.token;
    if (token) {
      next();
    } else {
      next("/login");
    }
  }
});

2.3、引入permission.js

// 引入权限控制
import "@/router/permission";

三、登录实现

3.1、Vuex登录模块封装

在store文件夹下面新建modules文件，modules下面新建login.js

export default {
  namespaced: true,
  state: {
    userinfo: {
      user: "",
      token: "",
    },
  },
  mutations: {
    setUser(state, payload) {
      state.userinfo = payload;
    },
    deleteUser(state) {
      state.userinfo = {
        user: "",
        token: "",
      };
    },
  },
};

引入模块index.js中

import Vue from "vue";
import Vuex from "vuex";
import login from "./modules/login";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {},
  getters: {},
  mutations: {},
  actions: {},
  modules: {
    login,
  },
});

3.2、登录成功操作

  • 用户输入账号密码，登录成功

  • 调用Vuex的登录模块setUser，存储用户信息，路由跳转到layout


    image.png

四、将路由拆分

4.1、提取动态路由

在router文件夹下面新建menuList.js，用于存放动态路由


image.png

menuList.js代码

// 物品管理
import GoodsMgr from "@/views/GoodsMgr";
import List from "@/views/GoodsMgr/List";
import Catagory from "@/views/GoodsMgr/Catagory";
// 订单管理
import OrderMgr from "@/views/OrderMgr";
import OrderList from "@/views/OrderMgr/OrderList";
import Collect from "@/views/OrderMgr/Collect";
// 系统管理
import System from "@/views/System";
import Dept from "@/views/System/Dept";
import Role from "@/views/System/Role";
import User from "@/views/System/User";
export const menuList = [
  {
    path: "/goods",
    name: "goods",
    component: GoodsMgr,
    children: [
      { path: "list", name: "list", component: List },
      {
        path: "catagory",
        name: "catagory",
        component: Catagory,
      },
    ],
  },
  {
    path: "/order",
    name: "order",
    component: OrderMgr,
    children: [
      { path: "list", name: "list", component: OrderList },
      {
        path: "collect",
        name: "collect",
        component: Collect,
      },
    ],
  },
  {
    path: "/system",
    name: "system",
    component: System,
    children: [
      { path: "dept", name: "dept", component: Dept },
      {
        path: "role",
        name: "role",
        component: Role,
      },
      {
        path: "user",
        name: "user",
        component: User,
      },
    ],
  },
];

4.2、登录页和首页home存放于index.js

import Vue from "vue";
import VueRouter from "vue-router";
import Layout from "@/views/Layout";
import Login from "@/views/Login";
import Home from "@/views/Home";

Vue.use(VueRouter);
// 基础路由（所有用户均可访问）
export const baseRoutes = [
  {
    path: "/",
    component: Layout,
    children: [{ path: "/", name: "home", component: Home }],
  },
];
// 登录页路由
export const routes = [
  {
    path: "/login",
    name: "login",
    component: Login,
  },
];

const router = new VueRouter({
  routes,
});

export default router;

五、方法封装(深拷贝和路由菜单比对)

新建util文件夹---新建index.js

/**
 * 对象深拷贝
 */
export const deepClone = (data) => {
  var type = getObjType(data);
  var obj;
  if (type === "array") {
    obj = [];
  } else if (type === "object") {
    obj = {};
  } else {
    // 不再具有下一层次
    return data;
  }
  if (type === "array") {
    for (var i = 0, len = data.length; i < len; i++) {
      obj.push(deepClone(data[i]));
    }
  } else if (type === "object") {
    for (var key in data) {
      obj[key] = deepClone(data[key]);
    }
  }
  return obj;
};
//前端总路由和后端返回的权限路由作比对筛选出具有权限的路由
export function rulesMenu(menuList, dyMenuList) {
  // 最终筛选出来的路由
  let menu = [];
  const arr = deepClone(menuList);
  arr.forEach((one) => {
    dyMenuList.forEach((two) => {
      if (one.path === two.path) {
        if (two.children && two.children.length > 0) {
          one.children = rulesMenu(one.children, two.children);
        }
        // 添加
        menu.push(one);
      }
    });
  });
  return menu;
}

六、动态路由处理

5.1、封装Vuex的menu.js模块

modules文件夹下面新建menu.js

image.png

menu.js

// 接口获取后端返回的动态菜单
import { permission } from "@/api/index";
// menuList 需要权限控制路由（完整）
import { menuList } from "@/router/menuList";
// baseRoutes 包含layout和home路由
import { baseRoutes } from "@/router/index";
// 深拷贝方法和菜单路由比对
import { deepClone, rulesMenu } from "@/util/index";
  
export default {
  namespaced: true,
  state: {
    dyMenuList: [], //动态路由导航
  },
  mutations: {
    setMenuList(state, payload) {
      state.dyMenuList = payload;
    },
    deleteMenuList(state) {
      state.dyMenuList = [];
    },
  },
  actions: {
    getMenuList({ commit, state, rootState }) {
      return new Promise((resolve, reject) => {
        permission({ token: rootState.login.userinfo.token })
          .then((res) => {
            console.log("后端返回的动态路由------------", res.data.data);
            console.log("前端定义的完整路由------------", menuList);
            // 比较前后端的路由文件----筛选出符合条件的路由文件
            let menus = rulesMenu(menuList, res.data.data);
            console.log("筛选出来的路由------------", menus);
            console.log("获取的基本路由layout-------", baseRoutes);
            // 深拷贝一份
            let arr = deepClone(baseRoutes);
            // 合并路由导航
            let routes = arr[0].children; //获取layout布局里面的子路由数组
            // 将筛选后的菜单放置到子路由数组
            routes.push(...menus);
            console.log("动态组装后的路由-------", arr);
            console.log("合并后的子路由数组-------", routes);

            commit("setMenuList", routes);
            // 动态添加路由
            /* 
            router.addRoutes 已废弃: 使用 router.addRoute() 代替
             */
            resolve(arr);
          })
          .catch((err) => {});
      });
    },
  },
};

引入menu.js模块

import Vue from "vue";
import Vuex from "vuex";
import login from "./modules/login";
import menu from "./modules/menu";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {},
  getters: {},
  mutations: {},
  actions: {},
  modules: {
    login,
    menu,
  },
});

七、修改全局路由守卫permission.js

import router from "./index";
import store from "@/store";

// 全局导航守卫
router.beforeEach((to, from, next) => {
  // 在匹配到的路由数组中，如果没有找到需要权限的直接放行
  if (to.matched.length && !to.matched.some((item) => item.isAuth)) {
    next();
  } else {
    //判断是否已经登录
    let token = store.state.userInfo.token;
    if (token) {
      // 判断是否有导航存储到Vuex中，如果有就进入,没有动态获取
      if (store.state.menu.dyMenuList.length !== 0) {
        next();
      } else {
        store.dispatch("menu/getMenuList").then((baseRoutes) => {
          // 动态添加路由
          /* 
            router.addRoutes 已废弃: 使用 router.addRoute() 代替
             */
          // router.addRoutes(baseRoutes); //废弃
          baseRoutes.forEach((element) => {
            router.addRoute(element);
          });
          // next({ ...to, replace: true }) //中断当前导航。执行新的导航
          next({ ...to, replace: true });
        });
      }
    } else {
      next("/login");
    }
  }
});
从实现importfromcomponent

有关从0实现后台管理系统的权限处理的更多相关文章

  1. ruby - i18n Assets 管理/翻译 UI - 2

    我正在使用i18n从头开始​​构建一个多语言网络应用程序，虽然我自己可以处理一大堆yml文件，但我说的语言(非常)有限，最终我想寻求外部帮助帮助。我想知道这里是否有人在使用UI插件/gem(与django上的django-rosetta不同)来处理多个翻译器，其中一些翻译器不愿意或无法处理存储库中的100多个文件，处理语言数据。谢谢&问候，安德拉斯(如果您已经在ruby​​onrails-talk上遇到了这个问题，我们深表歉意) 最佳答案 有一个rails3branchofthetolkgem在github上。您可以通过在Gemfi

  2. ruby - 如何指定 Rack 处理程序 - 2

    Rackup通过Rack的默认处理程序成功运行任何Rack应用程序。例如:classRackAppdefcall(environment)['200',{'Content-Type'=>'text/html'},["Helloworld"]]endendrunRackApp.new但是当最后一行更改为使用Rack的内置CGI处理程序时，rackup给出“NoMethodErrorat/undefinedmethod`call'fornil:NilClass”:Rack::Handler::CGI.runRackApp.newRack的其他内置处理程序也提出了同样的反对意见。例如Rack

  3. ruby - 如何根据特征实现 FactoryGirl 的条件行为 - 2

    我有一个用户工厂。我希望默认情况下确认用户。但是鉴于unconfirmed特征，我不希望它们被确认。虽然我有一个基于实现细节而不是抽象的工作实现，但我想知道如何正确地做到这一点。factory:userdoafter(:create)do|user,evaluator|#unwantedimplementationdetailshereunlessFactoryGirl.factories[:user].defined_traits.map(&:name).include?(:unconfirmed)user.confirm!endendtrait:unconfirmeddoenden

  4. ruby-on-rails - 获取 inf-ruby 以使用 ruby​​ 版本管理器 (rvm) - 2

    我安装了ruby​​版本管理器，并将RVM安装的ruby​​实现设置为默认值，这样'哪个ruby'显示'~/.rvm/ruby-1.8.6-p383/bin/ruby'但是当我在emacs中打开inf-ruby缓冲区时，它使用安装在/usr/bin中的ruby​​。有没有办法让emacs像shell一样尊重ruby​​的路径？谢谢! 最佳答案 我创建了一个emacs扩展来将rvm集成到emacs中。如果您有兴趣，可以在这里获取:http://github.com/senny/rvm.el

  5. ruby-on-rails - 事件管理员日期过滤器日期格式自定义 - 2

    是否有简单的方法来更改默认ISO格式(yyyy-mm-dd)的ActiveAdmin日期过滤器显示格式？ 最佳答案 您可以像这样为日期选择器提供额外的选项，而不是覆盖js:=f.input:my_date,as::datepicker,datepicker_options:{dateFormat:"mm/dd/yy"} 关于ruby-on-rails-事件管理员日期过滤器日期格式自定义，我们在StackOverflow上找到一个类似的问题： https://s

  6. 电脑0x0000001A蓝屏错误怎么U盘重装系统教学 - 2

    　　电脑0x0000001A蓝屏错误怎么U盘重装系统教学分享。有用户电脑开机之后遇到了系统蓝屏的情况。系统蓝屏问题很多时候都是系统bug，只有通过重装系统来进行解决。那么蓝屏问题如何通过U盘重装新系统来解决呢？来看看以下的详细操作方法教学吧。　　准备工作：　　1、U盘一个（尽量使用8G以上的U盘）。　　2、一台正常联网可使用的电脑。　　3、ghost或ISO系统镜像文件（Win10系统下载_Win10专业版_windows10正式版下载-系统之家）。　　4、在本页面下载U盘启动盘制作工具：系统之家U盘启动工具。　　U盘启动盘制作步骤：　　注意：制作期间，U盘会被格式化，因此U盘中的重要文件请注

  7. 华为OD机试用Python实现 -【明明的随机数】 2023Q1A - 2

    华为OD机试题本篇题目：明明的随机数题目输入描述输出描述：示例1输入输出说明代码编写思路最近更新的博客华为od2023|什么是华为od，od薪资待遇，od机试题清单华为OD机试真题大全，用Python解华为机试题|机试宝典【华为OD机试】全流程解析+经验分享,题型分享,防作弊指南华为o

  8. 【鸿蒙应用开发系列】- 获取系统设备信息以及版本API兼容调用方式 - 2

    在应用开发中，有时候我们需要获取系统的设备信息，用于数据上报和行为分析。那在鸿蒙系统中，我们应该怎么去获取设备的系统信息呢，比如说获取手机的系统版本号、手机的制造商、手机型号等数据。1、获取方式这里分为两种情况，一种是设备信息的获取，一种是系统信息的获取。1.1、获取设备信息获取设备信息，鸿蒙的SDK包为我们提供了DeviceInfo类，通过该类的一些静态方法，可以获取设备信息，DeviceInfo类的包路径为：ohos.system.DeviceInfo.具体的方法如下：ModifierandTypeMethodDescriptionstatic StringgetAbiList​()Obt

  9. 基于C#实现简易绘图工具【100010177】 - 2

    C#实现简易绘图工具一.引言实验目的:通过制作窗体应用程序(C#画图软件),熟悉基本的窗体设计过程以及控件设计,事件处理等,熟悉使用C#的winform窗体进行绘图的基本步骤,对于面向对象编程有更加深刻的体会.Tutorial任务设计一个具有基本功能的画图软件**·包括简单的新建文件,保存,重新绘图等功能**·实现一些基本图形的绘制,包括铅笔和基本形状等,学习橡皮工具的创建**·设计一个合理舒适的UI界面**注明:你可能需要先了解一些关于winform窗体应用程序绘图的基本知识,以及关于GDI+类和结构的知识二.实验环境Windows系统下的visualstudio2017C#窗体应用程序三.

  10. MIMO-OFDM无线通信技术及MATLAB实现（1）无线信道：传播和衰落 - 2

     MIMO技术的优缺点优点通过下面三个增益来总体概括：阵列增益。阵列增益是指由于接收机通过对接收信号的相干合并而活得的平均SNR的提高。在发射机不知道信道信息的情况下，MIMO系统可以获得的阵列增益与接收天线数成正比复用增益。在采用空间复用方案的MIMO系统中，可以获得复用增益，即信道容量成倍增加。信道容量的增加与min(Nt,Nr)成正比分集增益。在采用空间分集方案的MIMO系统中，可以获得分集增益，即可靠性性能的改善。分集增益用独立衰落支路数来描述，即分集指数。在使用了空时编码的MIMO系统中，由于接收天线或发射天线之间的间距较远，可认为它们各自的大尺度衰落是相互独立的，因此分布式MIMO

随机推荐