1.项目中登录权限是如何处理的(项目中如何做登录路由守卫的)
在路由配置中对需要登录权限的页面添加一个meta:{isRequireLogin:true}
,表示跳转到该页面后需要进行登录权限验证
{
path: '/user',
meta: {
requiredLogin: true
},
component: () => import('@/views/User/Index.vue')
}
在路由守卫中(to, from, next)
三个参数中的to
获取到meta.isRequireLogin
,如果有且为真,则需要对该页面进行登录校验
// 路由守卫,登录判断,以及主子页面之间的切换
router.beforeEach((to, from, next) => {
const { requiredLogin } = to.meta;
});
再从本地存储localstore
中获取login,看看用户有没有登录,如果登录了,则能获取到login且为真,之后放行,执行next
,如果不能获取,则表示用户没有登录,那么就跳转到登录页面
router.beforeEach((to, from, next) => {
const { requiredLogin } = to.meta;
const isLogin = localStorage.getItem("isLogin");
// 判断是否已经登录并是否页面需要登录权限,如果是,跳转到登录页面,若否,则放行
if (!isLogin && requiredLogin) {
next("login");
} else {
next();
}
});
2.在项目中如何使用localStore本地存储的
- 用户登录状态的持久化:当用户登录成功后,将用户的身份标识或认证令牌存储在
localStorage
中。这样,在用户刷新页面或重新打开应用时,可以检查localStorage
中是否存在有效的登录信息,从而保持用户的登录状态。 - 购买时表单数据的保存和恢复:使用
localStorage
来保存表单数据。当用户暂时离开页面或刷新页面时,可以将表单数据存储在localStorage
中,并在用户回到页面时从localStorage
中恢复数据,避免用户需要重新填写。 - 搜索界面的搜索记录:将搜索后的记录数据存储在
localStorage
中,并在需要时从本地获取,提高用户的体验感。
3.登录中如果token失效了,你是怎么处理的
- 清除失效的token:在前端,你可以清除本地存储(例如localStorage或sessionStorage)中的token以及与之相关的任何认证信息。这可以通过调用相应的方法(如
localStorage.removeItem('token')
)来实现。 - 重定向到登录页:一旦token失效,用户需要重新进行身份验证并获取新的有效token。在前端,你可以通过重定向用户到登录页来实现这一点。你可以使用Vue Router提供的
router.push('/login')
方法将用户导航到登录页面。 - 提示用户重新登录:为了给用户明确的反馈,你可以显示一条消息或弹出对话框,提示用户他们的token已经失效,并需要重新登录。
4.ES6中有个拷贝的方法,你知道那个方法吗?你还知道其他哪些方法?
除了Object.assign
这个浅拷贝方法,还有
-
Array.prototype.slice()
,Array.prototype.concat()
-
使用拓展运算符实现的复制
-
深拷贝
深拷贝开辟一个新的栈,两个对象属完成相同,但是对应两个不同的地址,修改一个对象的属性,不会改变另一个对象的属性
常见的深拷贝方式有:
- _.cloneDeep()
- JSON.stringify()
- 手写循环递归