登录权限案例分析笔记

1. 登录完成后动态渲染菜单

1.1 用户点击登录时的逻辑

1.2 登录后的逻辑处理

1.3 vuex刷新数据丢失问题

解决方案如下：

1. 安装 vuex-persistedstate库

npm install --save vuex-persistedstate

2. 使用

import createPersistedState from 'vuex-persistedstate'

2. 对应的路由配置完成后

处理手动切换地址栏时，路由跳转问题

两个思路

2.1 思路一：通过路由守卫去控制权限

• 当前项目中一共有多少路由，先统一定义好，至于能不能跳转，再通过守卫判断。
• 从登录用户信息获取角色id， 判断当前要去的路由里面的role是否可以访问

2.2 思路二：动态路由

• 用户登录时，将用户的信息保存在store中
• 再根据用户所拥有的权限，去动态注册所有的路由

3.自定义指令控制按钮权限

3.1. 在src文件夹下，新建directive文件夹，再在下面新建index.js文件

import Vue from "vue";
// 自定义指令控制按钮权限
import store from "@/store";

Vue.directive("add", function (el, bind) {

    let useinfo = store.state.currentAdmin;//用户登录信息
    let permissionlist = store.state.permissionList;//全部信息，包括所具有的权限
    //  bind.value.path是v-add指令所绑定的路由
    let useroute = permissionlist.find(r => r.path === bind.value.path)//找到用户权限的路由所对应的当前路由的
    console.log("useroute", useroute);
    if (useroute.edit.add.includes(useinfo.roleId)) {
        el.style.display = 'block';
    } else {
        el.style.display = 'none';
    }

})

3.2 思路解释如下图

3.3 store下的index.js文件如下

import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from 'vuex-persistedstate'
Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    adminList: [
      {
        loginid: 'admin',
        password: '123',
        roleId: 1,
        roleName: '超级管理员'
      },
      {
        loginid: 'vip1',
        password: '123',
        roleId: 2,
        roleName: '高级管理员'
      },
      {
        loginid: 'vip2',
        password: '123',
        roleId: 3,
        roleName: '中级管理员'
      }
    ],
    // 权限的数据
    permissionList: [
      {
        path: '/user',
        component: 'User',
        title: '用户管理',
        role: [1],//用户管理只有1，可以查看
        edit: {//所具有的功能
          add: [1],
          update: [1],
          del: [1],
        }
      },
      {
        path: '/car',
        component: 'Car',
        title: '汽车管理',
        role: [1, 2],
        edit: {//所具有的功能
          add: [1, 2],
          update: [1, 2],
          del: [1],//只有1登录的时候，才能看到del,删除，其他登录看不到。
        }
      },
      {
        path: '/phone',
        component: 'phone',
        title: '手机管理',
        role: [1, 2, 3],
        edit: {//所具有的功能
          add: [1, 2, 3],
          update: [1, 2],
          del: [1],
        }
      }
    ],
    // 登录用户
    currentAdmin: {}
  },
  getters: {
  },
  mutations: {
    setCurrentAdmin(state, val) {
      state.currentAdmin = val;
    }
  },
  actions: {
    setCurrentAdmin(store, val) {
      store.commit('setCurrentAdmin', val)
    }
  },
  modules: {
  },
  // 创建plugin
  plugins: [createPersistedState()],
})

3.4. 在对应组件中使用自定义指令。