인터뷰에서 자주 묻는 질문

1. 프로젝트에서 로그인 권한을 처리하는 방법(프로젝트에서 로그인 라우팅 가드를 수행하는 방법)

라우팅 구성에서 로그인 권한이 필요한 페이지에 하나를 추가하여 meta：{isRequireLogin:true}이 페이지로 이동한 후 로그인 권한 확인이 필요함을 나타냅니다.

{
    path: '/user',
    meta: {
        requiredLogin: true
    },
    component: () => import('@/views/User/Index.vue')
}

라우팅 가드의 (to, from, next)세 가지 매개 변수에서 to가져오고 meta.isRequireLogin있고 true인 경우 페이지에서 로그인 확인을 수행해야 합니다.

// 路由守卫，登录判断，以及主子页面之间的切换
router.beforeEach((to, from, next) => {
  const { requiredLogin } = to.meta;
});

그런 다음 로컬 저장소에서 로그인을 가져와서 사용자가 localstore로그인했는지 확인합니다. next로그인 후 로그인 페이지로 이동

router.beforeEach((to, from, next) => {
  const { requiredLogin } = to.meta;
  const isLogin = localStorage.getItem("isLogin");
  // 判断是否已经登录并是否页面需要登录权限，如果是，跳转到登录页面，若否，则放行
  if (!isLogin && requiredLogin) {
    next("login");
  } else {
    next();
  }
});

2. 프로젝트에서 localStore 로컬 저장소를 사용하는 방법

• 사용자 로그인 상태 유지 : 사용자가 성공적으로 로그인하면 사용자의 ID 또는 인증 토큰이 에 저장됩니다 localStorage. 이렇게 하면 사용자가 페이지를 새로고침하거나 앱을 다시 열 때 localStorage유효한 로그인 정보를 확인하여 로그인 상태를 유지할 수 있습니다.
• 구매 시 폼 데이터 저장 및 복원 : localStorage폼 데이터를 저장하기 위해 사용합니다. 사용자가 일시적으로 페이지를 떠나거나 페이지를 새로 고칠 때 양식 데이터를 저장하고 사용자localStorage 가 페이지로 돌아올 때 데이터를 복원하여 사용자가 다시 채울 필요가 없도록 할 수 있습니다.localStorage
• 검색 인터페이스에서 기록 검색 : 검색된 기록 데이터를 에 저장 localStorage하고 필요할 때 로컬에서 가져와 사용자 경험을 향상시킵니다.

 3. 로그인 중 토큰이 실패하면 어떻게 처리합니까?

• 만료된 토큰 지우기 : 프런트 엔드에서 로컬 스토리지(예: localStorage 또는 sessionStorage)의 토큰 및 이와 관련된 모든 인증 정보를 지울 수 있습니다. 이는 해당 메소드(예: localStorage.removeItem('token').
• 로그인 페이지로 리디렉션 : 토큰이 만료되면 사용자는 다시 인증하고 유효한 새 토큰을 받아야 합니다. 프런트 엔드에서 사용자를 로그인 페이지로 리디렉션하여 이를 수행할 수 있습니다. Vue 라우터에서 제공하는 방법을 사용하여 router.push('/login')사용자를 로그인 페이지로 이동할 수 있습니다.
• 사용자에게 다시 로그인하라는 메시지 표시 : 사용자에게 명시적인 피드백을 제공하기 위해 사용자에게 토큰이 만료되었으며 다시 로그인해야 함을 알리는 메시지 또는 팝업 대화 상자를 표시할 수 있습니다.

  4. ES6에 복사 방식이 있는데 그 방식을 아시나요? 어떤 다른 방법을 알고 있습니까?

     이 얕은 복사 방법 외에도 Object.assign다음이 있습니다.

• Array.prototype.slice(), Array.prototype.concat()

• 스프레드 연산자를 사용하여 복사

• 깊은 복사

  딥 카피는 새로운 스택을 생성합니다.두 개체의 속성은 동일하지만 두 개의 다른 주소에 해당합니다.한 개체의 속성을 수정해도 다른 개체의 속성은 변경되지 않습니다.

  일반적인 전체 복사 방법은 다음과 같습니다.

• _.cloneDeep()
• JSON.문자열화()
• 필기 루프 재귀