Vue中的权限管理和Mixin混入

最新推荐文章于 2023-07-14 09:01:55 发布

CookChopper

最新推荐文章于 2023-07-14 09:01:55 发布

阅读量408

点赞数 1

分类专栏：努力学前端文章标签： vue.js javascript

本文链接：https://blog.csdn.net/hjc13348/article/details/120147258

版权

本文详细介绍了在Vue.js应用中如何实现权限管理，包括在Vuex中创建Permission模块，动态更新路由权限列表，处理静态与动态路由的合并，配置并导出路由，以及退出时的路由重置。同时，还探讨了Mixin混入的使用，包括创建Mixin对象，main.js中的注册，以及在组件中的应用。

摘要由CSDN通过智能技术生成

权限管理

1. Vuex中Permission

新增store/modules/permission.js

/*
 * @Author: CookChopper
 * @Date: 2021-09-06 18:44:20
 * @LastEditTime: 2021-09-06 18:51:22
 * @LastEditors: CookChopper
 * @Description:
 */
// asyncRoutes 是动态路由列表
// constantRoutes 是静态路由列表
import {
    asyncRoutes, constantRoutes } from '@/router'


const state = {
   
  routes: constantRoutes
}

const mutations = {
   
  // newRoutes是用户所具有的权限列表(Array)
  setRoutes(state, newRoutes) {
   
    state.routes = [...constantRoutes, ...newRoutes]
  }
}

const actions = {
   
  // 将用户所具有的权限列表存入routes
  filterRoutes(context, menus) {
   
    const routes = []
    menus.forEach(key => {
   
      routes.push(...asyncRoutes.filter(item => item.name === key))
    })
    context.commit('setRoutes', routes) //state中的routes是为了侧边栏菜单
    return routes  // return 权限列表是为了给addRoutes添加动态路由
  }
}

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

2. 在store/index.js注册Permission

@/store/index.js

在这里插入代码片/*
 * @Author: CookChopper
 * @Date: 2021-07-07 21:36:48
 * @LastEditTime: 2021-09-06 18:48:26
 * @LastEditors: CookChopper
 * @Description:
 */
import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'
import app from './modules/app'
import settings from './modules/settings'
import user from './modules/user'
import permission from './modules/permission'

Vue.use(Vuex)

const store = new Vuex.Store({
   
  modules: {
   
    app,
    settings,
    user,
    permission //权限管理的Vuex
  },
  getters
})

export default store

3.更新Vuex中的routes权限列表

@/permission.js

/*
 * @Author: CookChopper
 * @Date: 2021-07-07 21:36:48
 * @LastEditTime: 2021-09-06 19:37:54
 * @LastEditors: CookChopper
 * @Description: 权限管理
 */
import router from '@/router'
import store from '@/store'

const whiteList = ['/login', '/404']

// 前置路由守卫
router.beforeEach(async (to, from, next) => {
   
  if (store.getters