前端面试-场景题

1. Vue怎么实现权限管理？

路由权限

方案一：初始化即加载全部路由，并且在路由上添加上相应权限信息，每次路由跳转前做校验。

• 缺点：
  • 加载所有路由，如果路由很多，而用户不是所有的权限，那么就会造成不必要的加载。
  • 全局路由守卫里，每次路由跳转都要进行权限判断。
  • 菜单信息写死在前端里，要改个权限信息，需要重新编译，适合角色固定的情况，
  • 菜单和路由耦合在一起，定义路由的时候还要添加菜单显示标题，而且路由不一定作为菜单，还要多加字段进行标识。

方案二：初始化时先挂载不需要权限控制的路由，比如登录页404等。如果用户通过URL强制访问，则会直接进入404，相当于从源头控制。
登陆后，获取用户的权限信息，然后筛选有权限访问的路由，在全局路由守卫里进行调用addRoutes添加路由。

• 缺点：
  • 全局路由守卫里，每次路由跳转都要进行权限判断。
  • 菜单信息写死在前端里，要改个权限信息，需要重新编译，适合角色固定的情况，
  • 菜单和路由耦合在一起，定义路由的时候还要添加菜单显示标题，而且路由不一定作为菜单，还要多加字段进行标识。

菜单权限

方案一：菜单与路由分离，菜单由后端返回，前端定义路由信息。

• 每次路由跳转的时候都要判断权限，这里的判断也很简单，因为菜单的name与路由的name是一一对应的，而后端返回的菜单就已经是经过权限过滤的。

• 如果根据路由name找不到对应的菜单，就表示用户有没权限访问。

• 如果路由很多，可以在应用初始化的时候，只挂载不需要权限控制的路由。取得后端返回的菜单后，根据菜单与路由的对应关系，筛选出可访问的路由，通过addRoutes动态挂载。

• 缺点：

  • 菜单需要与路由做一一对应，前端添加了新功能，需要通过菜单管理功能添加新的菜单，如果菜单配置的不对会导致应用不能正常使用。
  • 全局路由守卫里，每次路由跳转都要做判断。

方案二：菜单和路由都由后端返回

前端统一定义路由组件

const Home = () => import("../pages/Home.vue");
const UserInfo = () => import("../pages/UserInfo.vue");
export default {
    home: Home,
    userInfo: UserInfo
};

后端路由组件返回以下格式

[
    {
        name: "home",
        path: "/",
        component: "home"
    },
    {
        name: "home",
        path: "/userinfo",
        component: "userInfo"
    }
]

• 在将后端返回路由通过addRoutes动态挂载之间，需要将数据处理一下，将component字段换为真正的组件

• 如果有嵌套路由，后端功能设计的时候，要注意添加相应的字段，前端拿到数据也要做相应的处理

• 缺点：

  • 前后端配合要求高
  • 全局路由守卫里，每次路由跳转都要做判断。