面试重点
简述单点登录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)
实现全局守卫的步骤如下:
-
创建全局守卫函数(permission.js):在应用程序初始化时定义全局守卫函数。这些函数可以在任何地方实现,例如在路由配置文件(main.js)中或者在根组件中。
-
注册全局守卫:将全局守卫函数注册到路由实例中。在使用 Vue Router 的情况下,可以使用
router.beforeEach
方法注册全局前置守卫、router.afterEach
方法注册全局后置守卫、router.beforeResolve
方法注册全局解析守卫。 -
定义拦截逻辑:在全局守卫函数中编写具体的拦截逻辑。这可以包括验证用户登录状态(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就可以实现动态面包屑。