zoukankan      html  css  js  c++  java
  • Vue + Element-ui实现后台管理系统(6)---权限管理思路讲解

    权限管理思路讲解

    有关后台管理系统之前写过五篇博客,看这篇之前最好先看下这五篇博客。另外这里只展示关键部分代码,项目代码放在github上: mall-manage-system

    1、Vue + Element-ui实现后台管理系统(1) --- 总述

    2、Vue + Element-ui实现后台管理系统(2) --- 项目搭建 + ⾸⻚布局实现

    3、Vue + Element-ui实现后台管理系统(3) --- 面包屑 + Tag标签切换功能

    4、Vue + Element-ui实现后台管理系统(4)---封装一个ECharts组件的一点思路

    5、Vue + Element-ui实现后台管理系统(5)---封装一个Form表单组件和Table表格组件

    这篇主要讲解权限相关的功能:

    整体效果

    admin用户看到的菜单

    xiaoxiao用户看到的菜单

    可以发现不同的用户所看到侧边栏的菜单是不一样的。

    简单来讲大致需要满足的功能就是:

    1、不同的用户会根据权限不同,在后台管理系统渲染不同的菜单栏。
    2、用户登陆之后,会获取路由菜单和一个token,之后跳转的页面都需要带着token。
    3、用户退出登陆,清除动态路由,清除token。跳转到login页面。
    4、如果当前没有token,那么跳转到任何页面都应该重定向到login页面。
    

    一、权限管理代码思路讲解

    1、登陆所做的事情

    登陆操作应该至少要做三件事情

    1、获取当前用户对应的菜单栏的菜单,并存储到vuex和cookies中。

    2、获取当前用户的Token,存储到vuex和cookie中

    3、获取当前的菜单生成动态路由。

    代码

      methods: {
        login() {
          this.$http.post('api/permission/getMenu', this.form).then(res => {
            res = res.data
            if (res.code === 20000) {
              //先清除 房子重复加入
              this.$store.commit('clearMenu')
              //再加入
              this.$store.commit('setMenu', res.data.menu)
              //放入token
              this.$store.commit('setToken', res.data.token)
              //添加动态路由
              this.$store.commit('addMenu', this.$router)
              //跳转到首页
              this.$router.push({ name: 'home' })
            } else {
              //如果失败 提示失败信息
              this.$message.warning(res.data.message)
            }
          })
        }
      }
    

    2、退出登陆所做的事情

    退出登陆所做的事情就和登陆相反,主要做两件事情1、清除vuex和cookie中的菜单 2、清除vuex和cookie中的token

    代码

    logOut() {
          //清除token
          this.$store.commit('clearToken')
          //清除菜单
          this.$store.commit('clearMenu')
          //重定向 一般是登陆页
          location.reload()
        }
    

    3、路由守卫所做的事

    因为是后台管理系统,所以在我们在每切换一个路由都需要判断当前token是否存在,这个时候就需要通过路由守卫来实现。

    router.beforeEach((to, from, next) => {
      // 防止刷新后vuex里丢失token
      store.commit('getToken')
      // 防止刷新后vuex里丢失标签列表tagList
      store.commit('getMenu')
      let token = store.state.user.token
      // 过滤登录页,因为去登陆页不需要token(防止死循环)
      if (!token && to.name !== 'login') {
        next({ name: 'login' })
      } else {
        next()
      }
    })
    

    整个过程大家就是这样。现在展示vuex相关的代码。

    4、vuex存放token相关方法。

    import Cookie from 'js-cookie'
    export default {
      state: {
        token: ''
      },
      mutations: {
        //存放token
        setToken(state, val) {
          state.token = val
          Cookie.set('token', val)
        },
        //清空token
        clearToken(state) {
          state.token = ''
          Cookie.remove('token')
        },
        //获取token
        getToken(state) {
          state.token = Cookie.get('token')
        }
      },
      actions: {}
    }
    
    

    5、vuex存放菜单相关方法

    import Cookie from 'js-cookie'
    export default {
      state: {
        menu: []
      },
      mutations: {
        setMenu(state, val) {
          //vuex添加
          state.menu = val
          //cookie也添加
          Cookie.set('menu', JSON.stringify(val))
        },
        clearMenu(state) {
          //清除也一样 vuex和cookie都清除
          state.menu = []
          Cookie.remove('menu')
        },
        addMenu(state, router) {
          if (!Cookie.get('menu')) {
            return
          }
          //取出cookie数据 给vuex
          let menu = JSON.parse(Cookie.get('menu'))
          state.menu = menu
          //添加动态路由 主路由为Main.vue
          let currentMenu = [
            {
              path: '/',
              component: () => import(`@/views/Main`),
              children: []
            }
          ]
          //如果是一级菜单 那么菜单名称肯定有路由 如果是二级菜单那么一级没有 二级有路由
          menu.forEach(item => {
            if (item.children) {
              item.children = item.children.map(item => {
                item.component = () => import(`@/views/${item.url}`)
                return item
              })
              currentMenu[0].children.push(...item.children)
            } else {
              item.component = () => import(`@/views/${item.url}`)
              currentMenu[0].children.push(item)
            }
          })
          //添加动态路由
          router.addRoutes(currentMenu)
        }
      },
      actions: {}
    }
    

    整个电商后台管理系统相关内容到这里就已经写完了。



    别人骂我胖,我会生气,因为我心里承认了我胖。别人说我矮,我就会觉得好笑,因为我心里知道我不可能矮。这就是我们为什么会对别人的攻击生气。
    攻我盾者,乃我内心之矛(16)
    
  • 相关阅读:
    Delphi TcxComboBox控件说明
    Delphi ComboBox的属性和事件、及几个鼠标事件的触发
    Delphi XE5的新功能“ TListView内置搜索过滤”
    可能是全网最全的解决摄像头无法创建视频捕捉过滤器问题?
    Delphi – TDataSet确定它是否在插入/编辑状态时被修改
    Delphi 获取DataSet传入参数后的SQL命令
    TClientDataSet[7]: 辨析 Field、FieldDef、Fields、FieldDefs、FieldList、FieldDefList
    枚举HasFlag函数实现的内部逻辑是什么
    在DBGrid中用代码实现按回车键跳到下一格的方法
    eclipse下没有Dynamic Web Project的处理方法
  • 原文地址:https://www.cnblogs.com/qdhxhz/p/12655506.html
Copyright © 2011-2022 走看看