誉天程序员-2301-3-day06

面试重点

简述单点登录SSO

单点登录（Single Sign-On，简称SSO）是一种身份验证和授权机制，允许用户只需进行一次登录，就可以访问多个应用程序或系统，而无需再次提供凭据。（第一次访问时，某个系统，其他系统共享）SSO的目标是提高用户体验、简化身份验证过程，并增强系统的安全性。

SSO 的工作原理如下：

用户访问一个需要身份验证的应用程序（通常称为服务提供者，Service Provider，简称SP）。
SP检查用户是否已经进行过身份验证。如果没有，则重定向用户到身份提供者（Identity Provider，简称IdP）。
用户在IdP登录并进行身份验证。
IdP生成一个身份验证的令牌（通常是基于标准的安全令牌，如SAML或JWT（json格式数据，它加密，性能，安全）等）。
IdP将令牌返回给用户的浏览器。（cookie中）
用户的浏览器将令牌作为参数发送给SP。
SP接收到令牌后，验证令牌的有效性和完整性。
SP向用户授予访问权限，并将用户重定向到所请求的资源或系统。
单点登录的优势包括：

用户体验：用户只需进行一次登录，就可以访问多个应用程序，提高了用户的便利性和工作效率。
安全性：相比多个应用程序分别进行登录，使用SSO可以减少密码泄露和重复使用密码的风险。
管理简化：SSO集中了身份验证和授权，简化了用户账号的管理和维护。
集成性：SSO可以与不同的身份验证机制和协议进行集成，如SAML、OpenID Connect等。
需要注意的是，实施SSO需要对身份提供者和服务提供者进行配置和集成，确保它们能够相互认可和信任。

总结来说，单点登录（SSO）是一种身份验证和授权机制，允许用户只需进行一次登录就可以访问多个应用程序或系统。它提高了用户体验、简化了身份验证过程，并增强了系统的安全性。

全局守卫工作原理和实现

（描述一个知识点，有两种，一种由why？，一种由what？）
（what 技术总监，高级程序员）（why HR人力，非技术专业）
全局守卫（Global Guards）是指在路由导航过程中进行的全局级别的before前置,after后置拦截操作，用于控制用户访问特定路由的权限、验证用户身份、跳转到其他页面等。全局守卫的工作原理是在路由导航之前（from）、之后（to）以及导航被确认之前执行定义的拦截函数。

（how，where）

实现全局守卫的步骤如下：

1. 创建全局守卫函数(permission.js)：在应用程序初始化时定义全局守卫函数。这些函数可以在任何地方实现，例如在路由配置文件（main.js）中或者在根组件中。

2. 注册全局守卫：将全局守卫函数注册到路由实例中。在使用 Vue Router 的情况下，可以使用 router.beforeEach 方法注册全局前置守卫、router.afterEach 方法注册全局后置守卫、router.beforeResolve 方法注册全局解析守卫。

3. 定义拦截逻辑：在全局守卫函数中编写具体的拦截逻辑。这可以包括验证用户登录状态（token）、检查权限（根据token获取user）、跳转到其他页面等操作。

下面是一个示例，演示了如何实现全局守卫：

// main.js

import Vue from 'vue';
import VueRouter from 'vue-router';
import App from './App.vue';

Vue.use(VueRouter);

const router = new VueRouter({
  // 路由配置
});

// 全局前置守卫
router.beforeEach((to, from, next) => {
  // 在这里编写拦截逻辑
  // 检查用户登录状态、权限等
  // 如果需要进行跳转，使用 next 方法指定要跳转的路由
  // 如果不需要进行跳转，调用 next() 继续导航
  next();
});

new Vue({
  router,
  render: h => h(App)
}).$mount('#app');

通过以上步骤，我们可以在全局守卫中实现对路由导航的拦截和控制，根据需要进行身份验证、权限验证等操作，并决定是否允许用户访问特定的路由。

需要注意的是，全局守卫是在每次路由切换时触发的，因此要在守卫函数中进行异步操作需要使用适当的异步控制方式，确保守卫函数执行完毕后再进行下一步的导航。

总结来说，全局守卫是在路由导航过程中进行的全局级别的前置拦截操作，用于控制用户访问特定路由的权限、验证用户身份、跳转到其他页面等。它的实现包括创建全局守卫函数、注册全局守卫函数到路由实例中，并在守卫函数中定义具体的拦截逻辑。

axios拦截器和全局守卫区别

（给面试官挖坑，带节奏。反客为主，隐含隐晦。人家问：axios拦截器，正常答本身问题，说完本身问题后，我可以用了全局守卫来实现它。“同时，我还是要了全局守卫。”。面试官：“哎，你还知道这个。那你说说。”）

Axios拦截器和全局守卫是用于实现前端请求处理的两种不同机制，虽然它们的目的相似，但是在实现和应用上有一些区别。

（表达时要有条理性，结构清晰，框架性）
1、功能范围：Axios拦截器主要用于拦截和处理HTTP请求和响应，它可以在请求发送前或响应返回后对请求进行修改、添加通用处理逻辑、错误处理等。拦截器作用于具体的请求，可以根据需要为不同的请求添加特定的处理逻辑。全局守卫（Router Guards）则是用于控制用户路由导航的权限、验证用户身份、跳转到其他页面等。它全局作用于整个路由导航过程，用于处理用户访问特定路由时的权限验证和拦截。
（表达时，不要太生硬，多说些承上启下的话，当然也不用太多）

2、应用场景：Axios拦截器适用于处理HTTP请求和响应的通用逻辑，如添加认证信息、拦截错误、请求重试等。通过使用拦截器，可以避免在每个请求中都重复编写相同的逻辑，提高代码的复用性和维护性。全局守卫主要用于控制路由访问权限，验证用户身份，并根据需要进行跳转或拦截。例如，可以在全局守卫中检查用户是否登录，如果未登录则跳转到登录页面，或者根据用户的角色权限确定是否允许访问特定的路由。

3、实现方式：Axios拦截器是通过对Axios实例应用interceptors属性来定义和管理拦截器。可以为请求和响应分别添加拦截器，并在拦截器中修改请求参数、添加通用头部、处理错误等。全局守卫一般是在前端路由框架（如Vue Router）中使用钩子函数（回调）（vue框架底层会自动调用这个方法，在路由切换）（如beforeEach、beforeResolve）来实现，在路由导航前、后或确认之前执行一些特定的逻辑。

beforeEach和beforeResolve区别是，后者更好的支持异步调用。

总结来说，Axios拦截器主要用于拦截和处理HTTP请求和响应，而全局守卫用于控制用户路由导航的权限和验证身份。它们的实现方式、功能范围和应用场景上有一些区别。

网站框架

布局

左侧菜单，头部栏，展示栏
ElementPlus

嵌套路由

还有一个说法，一级路由，二级路由，三级路由，children[] 子路由。电商网站（大类、分类、小类，就3级，用户体验好）
一级路由，直接展示页面。（home/about）
二级路由，套在里面。展示区main展现。（user/book）
1）页面的在哪里加？。有几个不同展示方法，就需要写几次。
两处：App.vue(home,about）、Home.vue.main（user,book）
2）路由表要有对应的结构
配在路由表（数组）数组的第一层元素（一级路由，about,home），跟上面结构对应；
children第二层元素（二级路由，二级嵌套在某个第一层），home下配置user,book

Vue Router 和Route的区别

Router路由体系，路由表，路由跳转
Route获取路由信息，获取路由表 route.matched它获取路由表，从中获取name,path,metat。获取meta就可以实现动态面包屑。