功能面试题

权限管理

本质上可以分为三类：

功能权限（也是页面权限）：决定用户可以访问哪些页面或功能模块
按钮权限：决定用户在某个页面上可以使用哪些具体操作
接口权限：一般与按钮权限配合使用，防止路由配置时忘记加权限

实现步骤

在登录的时候服务端返回一个权限树，它是一个树形结构。我们需要对这个树形结构进行解析，根据这个树形结构生成对应的动态路由表或动态路由数组，然后利用 Vue Router 的 addRoute 方法动态插入这些路由，然后就可以根据这个动态数据去显示左边的菜单。

对于按钮权限，权限树里面包含了指定页面下指定的按钮数据，可以使用隐藏或禁用元素的方式处理。对于接口权限，大多时候在服务端处理即可。

如何处理 Token？

正常情况下登录时，一般把密码进行加密，登录完成后服务端会返回一个 token，拿到 token 之后会做持久化缓存，下次请求时在请求头里携带 token 进行登录。如果 token 过期，在响应拦截中会先清除 token 然后再跳转到登录页。

如何实现单点登录？

如果主域名一样，可以基于 cookie 共享来实现
如果主域名不一样，则需要使用 SSO（推荐用 CAS）
如果需要接入第三方登录，使用 OAuth2.0

例如：xxx.baidu.com 其中 baidu.com 是主域名

如何对一个网页全局异常捕获？

// Vue 错误处理
app.config.errorHandler = (err, vm, info) => {
  console.error("Vue error caught: ", err, info);
  // 发送错误日志到服务器
};
 
// try-catch
try {
  // 关键代码段
} catch (error) {
  console.error("Caught in try-catch: ", error);
  // 发送错误日志到服务器
}
 
// 全局错误处理
window.onerror = function (message, source, lineno, colno, error) {
  console.error("Global error caught: ", message, source, lineno, colno, error);
  // 发送错误日志到服务器
  return false;
};
 
// 资源加载错误
window.addEventListener(
  "error",
  function (event) {
    console.error("Resource error caught: ", event);
    // 发送错误日志到服务器
    return true;
  },
  true
);

探索