二开项目-权限应用全流程(人力资源类)

addRoutes基本使用**

格式

**router.addRoutes([路由配置对象])**或者:this.$router.addRoutes([路由配置对象])

改造代码

1 .在router/index.js中的路由配置中删除动态路由的部分

export const constantRoutes = [
  {
    path: '/login',
    component: () => import('@/views/login/index'),
    hidden: true
  },

  {
    path: '/404',
    component: () => import('@/views/404'),
    hidden: true
  },

  {
    path: '/',
    component: Layout,
    redirect: '/dashboard',
    children: [{
      path: 'dashboard',
      name: 'Dashboard',
      component: () => import('@/views/dashboard/index'),
      meta: { title: 'Dashboard', icon: 'dashboard' }
    }]
  },
-   approval,
-   attendance,
-   department,
-   employee,
-   permission,
-   role,
-   salary,
-   social
  // 404 page must be placed at the end !!!
--1--  { path: '*', redirect: '/404', hidden: true }
]

+ export const asyncRoytes = [
+   approval,
+   attendance,
+   department,
+   employee,
+   permission,
+   role,
+   salary,
+   social
+ ]

2. 在permission.js中引入，并使用addRoutes动态添加(前置守卫中)

const whiteList = ['/login', '/404']
// 前置守卫
router.beforeEach(async(to, from, next) => {
  NProgress.start()
  const token = store.state.user.token
  if (token) {
    // 如果有token
    if (to.path === '/login') {
      next('/')
      NProgress.done()
    } else {
      // if (!store.state.user.UserInfo.userId) { await store.dispatch('user/getProfile') }
      if (!store.getters.userId) {
++        const res = await store.dispatch('user/getProfile')//获取个人信息
++        // console.log('当前可以访问多少', res.roles.menus, asyncRoytes)
++        
++        const filteredRoutes = asyncRoytes.filter(item => {
++          return res.roles.menus.includes(item.children[0].name)
++        }) //筛选出跟个人信息里边的权限一样的asyncRoytes并赋值给filteredRoutes
++        // console.log('filteredRoutes', filteredRoutes)
++       
++1++         filteredRoutes.push({ path: '*', redirect: '/404', hidden: true })
++          
++          // 根据用户实际能访问几个页面来决定从整体8个路由设置
++        // 中，过滤中出来几个，然后保存到vuex中
++ ++       store.commit('menu/setMenuList', filteredRoutes)
++          
++        router.addRoutes(filteredRoutes)
++        
++          
++2++     // vueroter addRoutes白屏解决
++2++       next(to)
++      } else {
++        next()
      }
  } else {
    // 如果没有token,但是要进入的是白名单,直接进入
    if (whiteList.includes(to.path)) {
      // console.log('没有token,但是要进入的是白名单,直接进入')
      next()
    } else {
    // 如果没有token,但是要进入的不是白名单,直接进入登录页
      // console.log('没有token,但是要进入的不是白名单,直接进入登录页')
      next('/login')
      NProgress.done()
    }
  }
})

定义vuex管理菜单数据

1. 补充模块。在src/store/modules下补充menu.js模块：

• 定义数据menuList ; 修改数据的方法setMenuList

// 导入静态路由
import { constantRoutes } from '@/router'
const state = {
  menuList: [...constantRoutes]
}

const mutations = {
  setMenuList(state, asyncRoutes) {
    // 将动态路由和静态路由组合起来
    state.menuList = [...constantRoutes, ...asyncRoutes]
  }
}

export default {
  namespaced: true,
  state,
  mutations
}

注意:store/index.js中注册这个模块

...
++ import menu from './modules/menu'

Vue.use(Vuex)

const store = new Vuex.Store({
  modules: {
   ...
++    menu
  },
  getters
})

export default store

2. 提交setMenuList生成完整的菜单数据

(修改src/permission.js中的代码)上边改造代码2++++已实现

if (!store.getters.userId) {
        ...

        // 根据用户实际能访问几个页面来决定从整体8个路由设置
        // 中，过滤中出来几个，然后保存到vuex中
++       store.commit('menu/setMenuList', asyncRoutes)
      }

3. 菜单生成部分改写使用vuex中的数据

在src\layout\components\Sidebar\index.vue文件(侧边栏)中，修改

...
routes() {
  // 拿到的是一个完整的包含了静态路由和动态路由的数据结构
 -- // return this.$router.options.routes
 ++  return this.$store.state.menu.menuList
}
...

以上操作过程中,会出现三个问题:

bug1.404必须放在路由列表的最后边:

改造代码–1–和++1++已经实现

bug2.vueroter addRoutes方法白屏问题

改造代码++2++

bug3.控制台打印路由重复

src/router/index.js中已经封装好了方法

...
// Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
export function resetRouter() {
  const newRouter = createRouter()
  router.matcher = newRouter.matcher // reset router
}

点击退出时,在src/modules/user.js(vuex)中调用该方法即可

...
++ import { resetRouter } from '@/router/index.js'

const state = {
  // 登录-初始化token
  token: getToken() || null,
  // 用户个人信息
  UserInfo: {}
}

const mutations = {
  // 登录-操作token
  setToken(state, newToken) {
    state.token = newToken
    setToken(newToken)
  },
  // 用户个人信息
  setUserInfo(state, newUserInfo) {
    state.UserInfo = newUserInfo
  }
}

const actions = {
  // 登录-发请求
  async login(context, n) {
    // console.log(context, n)
    const res = await login(n)
    // console.log('actions login', res)
    const token = res.data
    context.commit('setToken', token)
  },
  // 获取用户基本信息-发请求
  async getProfile(context) {
    const res = await getProfile()
    // console.log(res.data)
    context.commit('setUserInfo', res.data)
    return res.data
  },
  // 退出
  logout(context) {
    context.commit('setToken', '')
    context.commit('setUserInfo', {})
 ++   resetRouter()
  }
}

s = await getProfile()
// console.log(res.data)
context.commit(‘setUserInfo’, res.data)
return res.data
},
// 退出
logout(context) {
context.commit(‘setToken’, ‘’)
context.commit(‘setUserInfo’, {})
++ resetRouter()
}
}