vue-admin-template用户权限控制及按钮权限

一、用户权限

1. 修改router/index.js文件
去掉多余的路由,只留下这两个路由。/404、{ path: "*", redirect: "/404", hidden: true }都注释掉。

image.png

2. 修改store/modules/user.js文件

image.png

import { adminMenus, signUserMenus } from "@/router/menus";
const getDefaultState = () => {
  return {
  menus: "", // 存放路由表
    };
};
const mutations = {
    SET_MEUN: (state, menus) => {
        state.menus = menus;
    },
}
// 如果是后端返回的路由结构,在这个里面导入
getRouter({ commit, state }) {
    return new Promise((resolve, reject) => {
      let role = sessionStorage.getItem("name");
      let menus;
      if (role == "admin") {
        menus = adminMenus;
      } else if (role == "urgent") {
        menus = urgentMenus;
      } else {
        menus = signUserMenus;
      }
      // 动态添加404
      menus.push(
        {
          path: "/404",
          component: "404",
          hidden: true,
        },
        {
          path: "*",
          redirect: "/404",
          hidden: true,
        }
      );
      commit("SET_MEUN", menus);
      resolve();
    });
  },

3. 修改store/getters.js文件

const getters = {
 menus: (state) => state.user.menus,
};

4. 自定义路由结构文件
因为路径在前端就定死了,所以就在前端写了个路由文件menus.js。

image.png

// 自定义admin的路由结构,一级路由、二级路由
export const adminMenus = [
  {
    component: "Layout",
    hidden: false,
    path: "/operation",
    children: [
      {
        path: "index",
        component: "operation/index",
        name: "operation",
        meta: { title: "许可", icon: "operation" },
      },
    ],
  },
  {
    alwaysShow: true,
    component: "Layout",
    hidden: false,
    path: "/system",
    meta: {
      title: "系统管理",
      icon: "system",
    },
    children: [
      {
        hidden: false,
        title: "用户管理",
        path: "user",
        component: "user/index",
        name: "user",
        meta: {
          title: "用户管理",
          icon: "el-icon-user",
        },
      }
      ],
  },

5、新建两个路由加载文件

image.png

_import_development.js

// 开发环境导入组件
module.exports = file => require('@/views/' + file + '.vue').default

_import_production.js

// 生产环境导入组件
module.exports = file => () => import('@/views/' + file + '.vue')

7、修改文件

image.png

8、修改permission.js文件

import router from "./router";
import store from "./store";
import { Message } from "element-ui";
import NProgress from "nprogress"; // progress bar
import "nprogress/nprogress.css"; // progress bar style
import { getToken } from "@/utils/auth"; // get token from cookie
import getPageTitle from "@/utils/get-page-title";
const _import = require("./router/_import_" + process.env.NODE_ENV); // 获取组件的方法
import Layout from "@/layout";
NProgress.configure({ showSpinner: false }); // NProgress Configuration  \ n程序配置

const whiteList = ["/login"]; // 白名单中的重定向

router.beforeEach(async (to, from, next) => {
  // 启动进度条
  NProgress.start();

  // 设置页面标题
  document.title = getPageTitle(to.meta.title);

  // 确定用户是否已登录
  const hasToken = getToken();
  let token = sessionStorage.getItem("token");
  if (token) {
    if (to.path === "/login") {
      // 如果已登录,请重定向到主页
      next({ path: "/" });
      NProgress.done();
    } else {
      const hasGetUserInfo = store.getters.name;
      if (hasGetUserInfo) {
        next();
      } else {
        try {
          // 获取用户信息
          await store.dispatch("user/getInfo");
          // 请求路由表
          await store.dispatch("user/getRouter");
          // 判断路由表的长度
          if (store.getters.menus.length < 1) {
            global.antRouter = [];
            next();
          }
          const menus = filterAsyncRouter(store.getters.menus); // 过滤路由
          // 动态添加路由
          router.addRoutes(menus);
          // 将路由数据传递给全局变量,做侧边栏渲染的工作
          global.antRouter = menus;
          next({ ...to, replace: true });
          // next();
        } catch (error) {
          // 删除令牌并转到登录页面重新登录
          await store.dispatch("user/resetToken");
          Message.error(error || "Has Error");
          next(`/login?redirect=${to.path}`);
          NProgress.done();
        }
      }
    }
  } else {
    /* 没有token*/

    if (whiteList.indexOf(to.path) !== -1) {
      // 在免费登录白名单中,直接进入
      next();
    } else {
      // 没有访问权限的其他页面将重定向到登录页面。
      next(`/login?redirect=${to.path}`);
      NProgress.done();
    }
  }
});

router.afterEach(() => {
  // 完成进度条
  NProgress.done();
});
//  遍历后台传来的路由字符串,转换为组件对象
function filterAsyncRouter(asyncRouterMap) {
  const accessedRouters = asyncRouterMap.filter((route) => {
    if (route.component) {
      if (route.component === "Layout") {
        route.component = Layout;
      } else {
        try {
          route.component = _import(route.component); // 导入组件
        } catch (error) {
          // route.component = _import('home/index') // 导入组件
          // Message.error("请查看控制台修改或者删除不存在的组件路径"); // 弹出异常('请修改或者删除不存在的组件路径')
        }
      }
    }

    if (route.children && route.children.length) {
      route.children = filterAsyncRouter(route.children);
    }
    return true;
  });

  return accessedRouters;
}

二、按钮权限
main.js

import '@/permission' // 权限控制
// 自定义指令 按钮权限
Vue.directive('permissions', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted(el, binding, node) {
    const {
      value
    } = binding
    
    // const roles = node.child.$route.meta.roles
    // 获取到当前用户的权限结构
    const roles =  JSON.parse(sessionStorage.getItem('authorities'));
    // console.log(roles)
    // console.log(node.child.$route)
    // if (roles.indexOf(value) >= 0) {
    //   return value
    // } else {
    //   el.parentNode && el.parentNode.removeChild(el) 
    // } //使用方式: v-permission="'add'"

    if (value && value instanceof Array && value.length > 0) {
      const permissionRoles = value
      const hasPermission = roles.some(role => {
        return permissionRoles.includes(role)
      })

      if (!hasPermission) {
        el.parentNode && el.parentNode.removeChild(el)
      }
    } else {
      throw new Error(`使用方式: v-permission="['admin','editor']"`)
    }
  }
})

index.vue

<el-button
  type="primary"
  @click="pageQuery('cx')"
  v-permissions="findOrgPage"
  >查询</el-button
>
data(){
    retunr{
        findOrgPage: ["findOrgPage"],
    }
}
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,743评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,296评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,285评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,485评论 1 283
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,581评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,821评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,960评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,719评论 0 266
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,186评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,516评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,650评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,329评论 4 330
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,936评论 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,757评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,991评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,370评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,527评论 2 349

推荐阅读更多精彩内容