面试常问到的问题

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()
  • 手写循环递归

猜你喜欢

转载自blog.csdn.net/qq_46617584/article/details/131705382