面接でよくある質問

1. プロジェクトでのログイン権限の扱い方（プロジェクトでログインルーティングガードを行う方法）

ルーティング設定のログイン許可が必要なページに追加しmeta：{isRequireLogin:true}、このページにジャンプした後にログイン許可の確認が必要であることを示します。

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

ルーティング ガードの(to, from, next)3 つのパラメーターからto取得されmeta.isRequireLogin、存在し、true の場合は、ページでログイン検証を実行する必要があります。

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

次に、ローカル ストレージからログイン情報を取得してlocalstore、ユーザーがログインしているかどうかを確認します。ログインしている場合、ログイン情報が取得でき、それが true であれば、解放して実行します。取得できない場合は、ユーザーがログインしていないことを意味します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 が提供するメソッドを使用してrouter.push('/login')、ユーザーをログイン ページに移動できます。
• ユーザーに再度ログインするよう求める: ユーザーに明示的なフィードバックを与えるために、トークンの有効期限が切れたため再ログインする必要があることをユーザーに通知するメッセージまたはポップアップ ダイアログを表示できます。

  4. ES6にはコピーという方法がありますが、その方法をご存知ですか？他にどのような方法を知っていますか?

     この浅いコピー方法に加えてObject.assign、次の方法があります。

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

• スプレッド演算子を使用してコピーする

• ディープコピー

  ディープ コピーにより、新しいスタックが作成されます。2 つのオブジェクトのプロパティは同じですが、2 つの異なるアドレスに対応します。一方のオブジェクトのプロパティを変更しても、もう一方のオブジェクトのプロパティは変更されません。

  一般的なディープ コピーの方法は次のとおりです。

• _.cloneDeep()
• JSON.stringify()
• 手書きのループ再帰