动态路由守卫配置

第一步 store user 用户

login({ commit }, userInfo) {
    const { username, password } = userInfo

    console.log(1, '第一步：login')

    return new Promise((resolve, reject) => {
      login({
        user_tel: username.trim(),
        user_password: password
      }).then(response => {
        const { data } = response

        console.log(data,'login 登录时候获取到的数据')

        commit('SET_TITLE', data.title)
        commit('SET_TOKEN', data.user.user_name)
        setToken(data.user.user_role)
        resolve()
        commit('SET_USERID', data.user.user_id)
        commit('SET_AVATAR', defaultSettings.ImgServer + data.user.user_icon)
        setUserId(data.user.user_id)
        setAvatar(defaultSettings.ImgServer + data.user.user_icon)
        setTitle(data.title)
        commit('SET_ROLES', user_role)

      }).catch(error => {
        reject(error)
      })
    })
  },

第二步 store permission 用户路由权限

//如果有权限的话
if (hasToken) {
    if (to.path === '/login') {
      next({
        path: '/'
      })
      NProgress.done() // hack: https://github.com/PanJiaChen/vue-element-admin/pull/2939
    } else {
      // 判断用户是否通过getInfo获取了权限角色
      try {
        if (hasRoles) {
          // console.log('hasToken', hasToken)
          next()
        } else {
          console.log(2, '路由守卫， 第一次从login 跳转')
          const abc = await store.dispatch('user/nav') 
          // 获取菜单, 说是获取菜单， 不如说是 获取路由配置文件， 就是 [{path， component }] 这些 ， 因为 user/nav 这个方法里 已经require 了 路由组件了
          // 这个abc 就是刚才看的后台获取的 菜单 （没有component） ， 加上了 componet 之后的 完整的路由配置了
          const accessRoutes = await store.dispatch('permission/generateRoutes', abc) // 路由  这里吧刚才的路由配置传进去， 然后加了一个处理， path: '*', 然后 执行下一行代码
          router.addRoutes(accessRoutes) // vue-router 提供的 addRoutes 添加路由
          // console.log(accessRoutes, 'accessRoutes');
          // debugger;
          next({
            ...to,
            replace: true
          })
        }
      } catch (error) {
        // 删除token，然后进入登录页面重新登录
        await store.dispatch('user/resetToken')
        Message.error(error || 'Has Error')
        next(`/login?redirect=${to.path}`)
        NProgress.done()
      }
    }
  }

第三步 第一步 store user 注入组件

const actions = {
  nav({
    state
  }) {
    return new Promise((resolve, reject) => {
      const abcd = [] //返回指定样式路由
      console.log(3, '第三步：获取菜单')
      console.log(state.title,'')
      getUserTreeList({
        user_id: state.user_id
      }).then(res => {
        let fatherPaths = res.data.map(item => item.tree_path)
          console.log('第三步判断：有概况页面')
        if (fatherPaths.includes('/')) {
        } else {
          console.log('第三步判断：不存在概况页面')
          let p = {
            path: '/',
            hidden: true,
            component: Layout,
            redirect: res.data[0]?.childs[0].tree_path || res.data[0].tree_path,
          }
          abcd.push(p)
        }
        res.data.forEach(item => {
          // console.log(item)
          let p = {
            path: item.tree_path,
            component: Layout,
            meta: {
              title: item.tree_name,
              icon: item.tree_icon
            }
          }
          // 重定向
          if (item.childs.length > 0) {
            p.redirect = item.childs[0].tree_path
          }
          let childNav = item.childs ? item.childs : []
          // 路由
          let c = childNav.map(item => {
            return {
              path: item.tree_path,
              name: item.tree_path,
              // 引入路由组件
              component: (resolve) => require([`@/views/${item.tree_component}`], resolve), // 引入 组件
              meta: {
                title: item.tree_name
              }
            }
          })
          // console.log('resolve3333')
          p.children = c
          abcd.push(p)
        })
        resolve(abcd)
      })
    })
  },

第四步 store permision.js 全局路由守卫

const actions = {
  async generateRoutes({ commit,}, roles) {
    console.log(4, '菜单')
    //roles为接收的导航！
    var role=['admin','editor']
    commit('user/SET_ROLES',role,{root:true})

    return new Promise(resolve => {
      let accessedRoutes
      let four = [{
        path: '*',
        redirect: '/404',
        hidden: true
      }]

      if (roles[0].path) {
        accessedRoutes = [...roles,...four]||[] //插入！！
      } else {
        accessedRoutes = four||[]
      }
      console.log(roles)
      commit('SET_ROUTES', accessedRoutes)
      resolve(accessedRoutes)
      // asyncRoutes,constantRoutes 这两个是 router 下面 index.js 定义的路由， 在这里引入进来
      // 然后 根据后台返回的角色 应该有个过滤， 然后resolve返回
    })
  },
}