首页 > 其他分享 >从零开始使用vue2+element搭建后台管理系统(实现按钮权限控制)

从零开始使用vue2+element搭建后台管理系统(实现按钮权限控制)

时间:2023-09-14 14:47:13浏览次数:49  
标签:const name element state 从零开始 vue2 commit return data

思路:登录后请求用户信息接口,后端返回用户信息中包括权限数组,数据格式be like:

 前端对用户信息进行存储(对没错又是假接口):

    // 获取用户信息
    async getUserInfo(mobile) {
      try {
        this.loading = true;
        const res = await getInfo(mobile);
        if (res.code !== 10000)
          this.$message.error(res.msg || "获取用户信息失败!");
        if (res.code === 10000 && res.data) {
          this.$store.commit("user/SET_NAME", res.data.name);
          this.$store.commit("user/SET_AVATAR", res.data.avatar);
          this.$store.commit("user/SET_PERMISSION", res.data.permissionList);
          this.$store.commit("basic/setMenu", res.data.menuList);
          // 缓存用户信息
          Cookie.setItem(
            "userInfo",
            JSON.stringify({
              name: res.data.name,
              avatar: res.data.avatar,
              permission: res.data.permissionList,
            })
          );
          setTimeout(() => {
            this.$router.push("/home");
          });
        }
      } finally {
        this.loading = false;
      }
    },

  

实际上我们会用store中的actions里的方法进行处理,以下是store下登录模块文件的代码:

import Cookie from "js-cookies";
import { login, logout, getInfo } from "@/api/user";
import { getToken, setToken, removeToken } from "@/utils/auth";
import { resetRouter } from "@/router";

const getDefaultState = () => {
  return {
    token: getToken(),
    name: "",
    avatar: "",
    permission: [], // 按钮权限
  };
};

const state = getDefaultState();

const mutations = {
  RESET_STATE: (state) => {
    Object.assign(state, getDefaultState());
  },
  SET_TOKEN: (state, token) => {
    state.token = token;
  },
  SET_NAME: (state, name) => {
    state.name = name;
  },
  SET_AVATAR: (state, avatar) => {
    state.avatar = avatar;
  },
  SET_PERMISSION: (state, permission) => {
    state.permission = permission;
  },
};

const actions = {
  login({ commit }, userInfo) {
    const { username, password } = userInfo;
    return new Promise((resolve, reject) => {
      login({ username: username.trim(), password: password })
        .then((response) => {
          const { data } = response;
          commit("SET_TOKEN", data.token);
          setToken(data.token);
          resolve();
        })
        .catch((error) => {
          reject(error);
        });
    });
  },
  getInfo({ commit, state }) {
    return new Promise((resolve, reject) => {
      getInfo(state.token)
        .then((response) => {
          const { data } = response;

          if (!data) {
            return reject("验证失败,请重新登录");
          }

          const { name, avatar, permissionList } = data;

          commit("SET_NAME", name);
          commit("SET_AVATAR", avatar);
          commit("SET_PERMISSION", permissionList);
          // 缓存用户信息
          Cookie.setItem(
            "userInfo",
            JSON.stringify({ name, avatar, permission: permissionList })
          );
          resolve(data);
        })
        .catch((error) => {
          reject(error);
        });
    });
  },
  logout({ commit, state }) {
    return new Promise((resolve, reject) => {
      logout(state.token)
        .then(() => {
          removeToken();
          resetRouter();
          commit("RESET_STATE");
          // 清除用户信息
          Cookie.removeItem("userInfo");
          resolve();
        })
        .catch((error) => {
          reject(error);
        });
    });
  },
  resetToken({ commit }) {
    return new Promise((resolve) => {
      removeToken();
      commit("RESET_STATE");
      resolve();
    });
  },
};

export default {
  namespaced: true,
  state,
  mutations,
  actions,
};

  

接下来在components文件夹下创建AuthorizedView.vue,将来会被用来包裹需要控制权限的元素:

<script>
import { checkPermission } from "@/utils/auth";
export default {
  name: "AuthorizedView",
  // 函数式组件
  functional: true,
  props: {
    authority: {
      type: Array,
      required: true,
    },
  },
  render(h, context) {
    const { props, scopedSlots } = context;
    return checkPermission(props.authority) ? scopedSlots.default() : null;
  },
};
</script>

  

可以看到代码中引用了一个utils下的方法:

const TokenKey = "Admin-Token";
import Cookie from "js-cookies";

// 获取Token
export function getToken() {
  return Cookie.getItem(TokenKey);
}

// 存储Token 【cookie有效期设置为客服交班时间14小时】
export function setToken(value) {
  let seconds = 14 * 60 * 60;
  let expires = new Date(new Date() * 1 + seconds * 1000);
  console.log(TokenKey, value, expires);
  return Cookie.setItem(TokenKey, value, expires);
}

// 移除Token
export function removeToken() {
  return Cookie.removeItem(TokenKey);
}

// 获取菜单
export function getMenu() {
  const menuStr = Cookie.getItem("menu");
  if (menuStr) {
    return JSON.parse(menuStr);
  } else {
    return [];
  }
}

// 获取用户信息(用户名、头像、按钮权限等)
export function getUserInfo(key) {
  const userStr = JSON.parse(Cookie.getItem("userInfo") || "") || {};
  if (userStr) {
    if (key === "avatar") return userStr.avatar;
    if (key === "name") return userStr.name;
    if (key === "permission") return userStr.permission;
  } else {
    return "";
  }
}

// 按钮权限校验
export function checkPermission(list) {
  const userStr = JSON.parse(Cookie.getItem("userInfo") || "") || {};
  const authList = userStr.permission;
  return list.some((item) => authList.includes(item));
}

  

因为权限是全局功能,所以直接在main.js中引入:

import AuthorizedView from "@/components/AuthorizedView";


Vue.component("AuthorizedView", AuthorizedView);

  

实际使用(这里是在表格的操作栏中对详情按钮进行控制):

<el-table-column fixed="right" label="操作" width="120">
          <template slot-scope="scope">
            <AuthorizedView :authority="['ACCOUNT_DETAIL']">
              <el-button @click="handleDetail(scope.row)" type="text"
                >详情</el-button
              >
            </AuthorizedView>
          </template>
        </el-table-column>

  

可以看到页面上可以展示按钮:

 再来试一下写个没有的权限:

 发现页面上没有显示这个按钮:

 

以上,一个简单的按钮权限控制功能就实现啦~撒花花~✿✿ヽ(°▽°)ノ✿

 

标签:const,name,element,state,从零开始,vue2,commit,return,data
From: https://www.cnblogs.com/nangras/p/17702412.html

相关文章

  • vue2实现pc端自适应分辨率
    思路:使用lib-flexible结合postcss-pxtorem实现第一步在项目utils下建立flexible.js文件(直接下载则不用新建该文件)第二部复制以下代码到刚建好的文件中或者直接yarninstalllib-flexible-pc-y//基于libflexible用来适配pc端(function(win,lib){ vardoc=win.docu......
  • 如何将element-ui中的tab组件默认展示的tab标签数量改掉?
    要将ElementUI中的Tab组件默认展示的标签数量更改,可以使用tab-list属性设置。tab-list属性用于控制默认展示的标签数量。以下是修改Tab组件默认展示标签数量的示例代码:<template><el-tabsv-model="activeTab":tab-list="tabList"><el-tab-panev-for="tabint......
  • 从零开始使用vue2+element搭建后台管理系统(实现导出excel表格的功能)
    首先参阅了以下文档:https://panjiachen.gitee.io/vue-element-admin-site/zh/feature/component/excel.html#excel-%E5%AF%BC%E5%87%BAhttps://blog.csdn.net/weixin_42028153/article/details/124804841核心思想:抄一下vue-element-admin这个很棒的开源集成后台管理系统中所提......
  • VUE2教程-基础-Class 与 Style 绑定
    Class与Style绑定操作元素的class列表和内联样式是数据绑定的一个常见需求。因为它们都是attribute,所以我们可以用 v-bind 处理它们:只需要通过表达式计算出字符串结果即可。不过,字符串拼接麻烦且易错。因此,在将 v-bind 用于 class 和 style 时,Vue.js做了专门的增强......
  • VUE2基础-Vue实例
    Vue实例创建一个Vue实例 每个Vue应用都是通过用 Vue 函数创建一个新的 Vue实例开始的:varvm=newVue({//选项})虽然没有完全遵循 MVVM模型,但是Vue的设计也受到了它的启发。因此在文档中经常会使用 vm (ViewModel的缩写)这个变量名表示Vue实例。当创建......
  • VUE2教程-基础-简介
    Vue.js是什么Vue(读音/vjuː/,类似于 view)是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue......
  • element ui中的message弹出框只出现一次
    import{Message}from'element-ui';letmessageInstance=null;constresetMessage=(options)=>{if(messageInstance){messageInstance.close()}messageInstance=Message(options)};['error','success&#......
  • 使用element-plus组件在vue中引入分页功能
    1、组件的引入<el-paginationbackgroundlayout="prev,pager,next"page-size="6":total="60"></el-pagination>2、存在问题就是,现在页码并不能与每页的内容相互对应解决方式:page用来表示确认每一页是否点击到,正式......
  • OpenTiny Vue组件库实现跨框架(vue2、vue3、react、solid)
    本文由TinyVue组件库核心成员郑志超分享,首先分享了实现跨框架组件库的必要性,同时通过演示demo和实际操作向我们介绍了如何实现一个跨框架的组件库。前言前端组件库跨框架是什么?前端组件库跨框架是指在不同的前端框架(如React、Vue、Solid等)之间共享和复用组件的能力。这种能力可以让......
  • bilibili B站:从零开始学Makefile - 部分截图
    视频摘自B站:https://www.bilibili.com/video/BV1Bv4y1J7QT笔记摘自:https://gitee.com/yanmu_ym/cpp    ......