Vue中权限+动态路由加载

哈喽大家好，今天我们来探讨 Vue 开发中不可避免的动态路由权限。尤其是开发后台管理系统，其中有很多的角色需要用来做判断。不同的角色有着不同的权限。作为管理员还必须拥有修改这些权限的能力。

这样的操作无疑会使得前端做路由的加载时显得更为复杂。我司的角色有包括管理员在内总共 6 种。所以我将自己在开发过程中遇到的问题整理起来。 仅做参考，希望对大家有帮助！

思路

1. 先从最高权限下手，把项目所有需要做动态分配的路由都保存到后台服务器。(可能会有人说放在后端就遏制住前端的处理了，但是根据我们目前的情况，放在后台更方便处理)。
2. 利用后台存放的数据，做成菜单树。然后给每一个想要获取权限的角色分配权限，达到每一个角色都拥有自定义权限。
3. 给创建成的不同用户分配角色，达到权限的动态分配。我司的处理情况特殊，也就是给不同的角色来划分权限
4. 当用户登录时，获取当前用户所在角色组，利用角色返回配置的路由信息，然后将信息加载到 vue-router 中，实现不同用户||角色登录进系统后，显示不同的路由菜单。

业务代码

1. 用户登录以后，在 cookie 存放后台返回的 Token||sessionID。

login(userInfo).then((res) => {
  if (res.code == 600) {
    resolve(res);
    return;
  }
  commit("SET_TOKEN", res.res);
  setToken(res.res);
  resolve(res);
});

2.在路由守卫中，我们做判断。如果有我们要的 cookie，那么就让继续加载路由。处理相关事宜，这块如有不懂。后期我会单独抽出来做一次 vue 路由守卫的理解。

// 确定用户是否已登录
const hasToken = store.getters.token;
if (hasToken) {
  if (to.path === "/login") {
    // 如果已登录，则重定向到主页
    next({
      path: "/",
    });
    NProgress.done();
  } else {
    // 确定用户是否通过getInfo获得了他的权限角色
    const hasRoles = store.getters.roles && store.getters.roles.length > 0;
    if (hasRoles) {
      next();
    } else {
      try {
        /*
                     主要的操作在第三步
                */
      } catch (error) {
        // 删除token，进入登录页面重新登录
        await store.dispatch("user/resetToken");
        Message.error(error || "Has Error");
        next(`/login?redirect=${to.path}`);
        NProgress.done();
      }
    }
  }
} else {
  /* 没有token */
  if (whiteList.indexOf(to.path) !== -1) {
    // 在免费登录白名单，直接去查看
    next();
  } else {
    // 没有访问权限的其他页面被重定向到登录页面。
    next(`/login?redirect=${to.path}`);
    NProgress.done();
  }
}

3. 当路由守卫判断这是第一次进入系统，没有角色。所以就要开始获取角色。利用在 vuex 中写的异步方法请求到这一角色信息，以及对应的路由信息。

getInfo({
    commit,
    state
}) {
    return new Promise((resolve, reject) => {
        getInfo().then(e => {
            // 因为这里测试时只返回了路由信息，我在这里自定义了roles和name.
            var data = {
                roles: ['admin'],
                name: '长得丑活得久，长得帅老的快',
                list: e.res
            }
            const {
                roles,
                name,
            } = data;
            commit('SET_ROLES', roles)
            commit('SET_NAME', name)
            resolve(data)
        })
    })
}

获取当前角色的信息，并抛出 --> 需要放入第二步空出来的区域

// 获取路由列表
const { list } = await store.dispatch("user/getInfo");
//如果返回的数据列表为空，让重新登录
if (list == undefined) {
  await store.dispatch("user/resetToken");
  next(`/${to.path}`);
  NProgress.done();
} else {
  const accessRoutes = await store.dispatch("permission/generateRoutes", list);
  // 根据角色生成可访问路由映射
  // 动态添加可访问路由
  router.addRoutes(accessRoutes);
  // 设置replace: true，这样导航就不会留下历史记录
  next({
    ...to,
    replace: true,
  });
}

此时抛出的 data 被获取到，我们拿到想要的 list。通过已经定义好的递归方法，把我们传进去的 list 生成 vue 的路由，并将生成的数据返回。我们使用 router.addRoutes() 方法将路由加载。

4. 接第三步路由信息的处理方法。

[collapse title="完整代码"]

import { constantRoutes } from "@/router";

import Layout from "@/layout";

/**

* 加载其他路由
* @param {Object} route
  */
  function makeOtherRouter(route) {
  var res = [];
  route.children.forEach((i) => {
  const item = {
  ...i,
  };
  var Unified = item.router.split("/").pop();
  var next = {
  path: Unified,
  component: () => import(`@/views${item.router}`),
  name: Unified,
  meta: {
  title: Unified,
  },
  };
  // 是否可见
  if (item.visible == "0") {
  next.hidden = true;
  }
  // 子路由
  if (item.children) {
  next = {};
  next = {
  path: Unified,
  component: () => import(`@/views${item.router}/index`),
  name: Unified,
  meta: {
  title: Unified,
  },
  };
  if (item.children.length == 1) {
  next.alwaysShow = true;
  }
  next.children = [];
  next.children = makeRouter(item);
  }
  
  res.push(next);
  });
  return res;
  }

//加载第一层路由
export function makeFirstRouter(routes) {
const res = [];
routes.forEach((route) => {
const tmp = {
...route,
};
var Unified = tmp.router.split("/").pop();
if (tmp.icon) {
var first = {
path: tmp.router,
component: Layout,
name: Unified,
meta: {
title: Unified,
icon: tmp.icon,
},
};
}
// 第一级路由是否可见
if (tmp.visible == "0") {
first.hidden = true;
}
if (tmp.children) {
first.children = [];
first.children = makeOtherRouter(tmp);
}
if (tmp.children.length == 1) {
first.alwaysShow = true;
}
res.push(first);
});
return res;
}

const state = {
routes: [],
addRoutes: [],
};

const mutations = {
SET_ROUTES: (state, routes) => {
state.addRoutes = routes;
state.routes = constantRoutes.concat(routes);
},
};

const actions = {
generateRoutes({ commit }, list) {
return new Promise((resolve) => {
let accessedRoutes = makeFirstRouter(list);
//异步路由要把404放在最后加载。
accessedRoutes.push({
path: "*",
redirect: "/404",
hidden: true,
});
commit("SET_ROUTES", accessedRoutes);
resolve(accessedRoutes);
});
},
};

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

[/collapse]

此时我们的路由就已经处理完成。大致的流程走到这里就结束了。因为数据为公司内部数据在这里就没有引用真实的数据，所以只是用语言组织的。

后面如果找到合适的数据会再次提出来，希望对正在处理这个问题的朋友提供一点点思路和帮助。希望支持~