前端面試問題(jwt/布局/vue數組下標/扁平化/菜單樹形/url api/新版本)

前端面試問題(jwt/布局/vue數組下標/扁平化/菜單樹形/url api/新版本)

1. jwt鑒權邏輯

前端 JWT 鑒權邏輯通常涉及在發起請求時攜帶 JWT，并在接收到響應后處理可能的授權問題。

1. 用戶登錄：

  1. 用戶提供憑證： 用戶在登錄界面輸入用戶名和密碼。

  2. 請求后端認證： 前端通過發送用戶提供的憑證（通常是用戶名和密碼）到后端進行身份驗證。

  3. 接收并存儲Token： 如果身份驗證成功，后端生成 JWT 并將其發送給前端。前端通常會將 JWT 存儲在客戶端（通常是瀏覽器）的本地存儲（localStorage 或 sessionStorage）中。

2. 請求時的鑒權：

  1. 構建請求頭： 在每次發送請求時，前端將存儲的 JWT 添加到請求頭中。

    // 使用 Axios 發送請求的方式
const token = localStorage.getItem('jwtToken');
axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;

  2. 發送請求： 發送請求到后端，后端會檢查請求頭中的 JWT 是否有效。

  3. 處理響應： 前端接收到響應后，可以根據響應狀態碼和內容進行相應的處理。

    • 如果響應狀態碼為 401（未授權）或 403（禁止訪問），可能表示 JWT 已過期或用戶無權限，需要處理重新登錄或其他操作。

    • 如果響應狀態碼為 200，表示請求成功，前端可以繼續處理返回的數據。

3. 處理過期的Token：

  1. 捕獲過期錯誤： 前端需要捕獲過期錯誤。當后端返回 401 狀態碼時，可以視為 JWT 過期。

  2. 刷新Token： 如果服務器支持，可以嘗試使用 refresh token 來獲取新的 JWT，避免用戶重新登錄。

注意事項：

  • 安全存儲： JWT 存儲在前端，因此需要確保它被安全地存儲。一般來說，避免將敏感信息存儲在 JWT 中，因為它可以被解碼。

  • 定期刷新： 定期檢查 JWT 是否過期，如果過期，需要進行刷新操作。

  • 前端安全性： 前端只能負責存儲和傳遞 JWT，實際的用戶身份驗證和授權邏輯仍然應該由后端負責。

2. 實現頂部導航+左側菜單+右側主內容區域布局

在前端，實現頂部導航、左側菜單、右側主內容區域布局通常有多種方式，取決于項目的需求和開發者的技術偏好。以下是其中三種常見的實現方式：

1. Flexbox 布局：

使用 CSS 的 Flexbox 布局是一種簡單而靈活的方法，它能夠輕松地實現頂部導航、左側菜單和右側主內容區域的布局。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Flexbox Layout</title><style>body {margin: 0;display: flex;flex-direction: column;height: 100vh;}header, main {flex: 0 0 auto;}main {display: flex;}nav {width: 200px;background-color: #333;color: #fff;}section {flex: 1;padding: 20px;}</style>
</head>
<body><header><!-- 頂部導航 --><h1>頂部</h1></header><main><nav><!-- 左側菜單 --><h1>左側</h1></nav><section><!-- 右側主內容區域 --><h1>右側</h1></section></main>
</body>
</html>

2. Grid 布局：

CSS Grid 布局也是一種強大的布局方式，允許更復雜的網格結構。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Grid Layout</title><style>body {margin: 0;display: grid;grid-template-columns: 200px 1fr;grid-template-rows: auto 1fr;grid-template-areas:"header header""nav main";height: 100vh;}header, nav, main {padding: 20px;}header {grid-area: header;background-color: #ddd;}nav {grid-area: nav;background-color: #333;color: #fff;}main {grid-area: main;display: flex;}</style>
</head>
<body><header><!-- 頂部導航 --><h1>頂部</h1></header><nav><!-- 左側菜單 --><h1>左側</h1></nav><main><!-- 右側主內容區域 --><h1>右側</h1></main>
</body>
</html>

3. Bootstrap：

使用 Bootstrap 框架是一種快速搭建響應式布局的方法。Bootstrap 提供了許多現成的組件和樣式，使得實現這種布局變得非常容易。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"><title>Bootstrap Layout</title>
</head>
<body><header class="bg-light p-3"><!-- 頂部導航 --><h1>頂部</h1></header><div class="container-fluid"><div class="row"><nav class="col-md-2 bg-dark text-light"><!-- 左側菜單 --><h1>左側</h1></nav><main class="col-md-10"><!-- 右側主內容區域 --><h1>右側</h1></main></div></div>
</body>
</html>

4. CSS Float 布局

使用float屬性可以實現一種簡單的布局，但需要注意清除浮動以避免影響后續布局。

<div class="header">頂部導航</div>
<div class="menu">左側菜單</div>
<div class="content">右側主內容區域</div><style>.header { clear: both; }.menu { float: left; width: 20%; }.content { margin-left: 20%; }
</style>

3. Vue數組下標改值時響應式丟失,為什么

在Vue中，數組下標改值導致響應式丟失的原因通常是由于Vue對數組的監聽機制的限制。Vue的響應式系統對于數組的變更檢測有一些局限性，主要涉及到以下情況：

  1. 直接通過索引設置數組元素時，無法觸發視圖更新： Vue的響應式系統不能檢測到直接通過索引設置數組元素的變化。例如，array[index] = value 這種方式不會觸發響應式更新。

  2. 通過splice方法添加或刪除元素時能夠觸發更新： 使用Vue提供的數組變異方法（例如splice）來添加或刪除元素時，Vue能夠監聽到變化并觸發相應的更新。

// 在Vue組件中的data
data() {return {myArray: [1, 2, 3]};
},
methods: {updateValue() {// 這種方式修改數組的元素，不會觸發響應式更新this.myArray[0] = 99;}
}

直接通過索引修改數組元素的值 this.myArray[0] = 99; 不會觸發Vue的響應式系統。

為了確保能夠觸發響應式更新，可以使用Vue提供的變異方法，比如使用Vue.set方法：

methods: {updateValue() {// 使用 Vue.set 來確保觸發響應式更新Vue.set(this.myArray, 0, 99);}
}

或者使用splice方法：

methods: {updateValue() {// 使用 splice 來確保觸發響應式更新this.myArray.splice(0, 1, 99);}
}

4. 數組扁平化

  1. 使用遞歸（原生 JavaScript）：

    function flattenArray(arr) {return arr.reduce((acc, curr) => Array.isArray(curr) ? acc.concat(flattenArray(curr)) : acc.concat(curr), []);
}const nestedArray = [[0, 1], [2, [3, 4]], [5, 6]];
const flattenedArray = flattenArray(nestedArray);
console.log(flattenedArray);

  2. 使用 Array.flat() 方法（ECMAScript 2019）：

    const nestedArray = [[0, 1], [2, [3, 4]], [5, 6]];
const flattenedArray = nestedArray.flat(Infinity);
console.log(flattenedArray);

  3. 使用 lodash 庫：

    const _ = require('lodash');const nestedArray = [[0, 1], [2, [3, 4]], [5, 6]];
const flattenedArray = _.flattenDeep(nestedArray);
console.log(flattenedArray);

Array.flat() 方法和 lodash 的 _.flattenDeep() 都可以遞歸地將數組扁平化，而原生的遞歸方法Array.reduce()` 方法需要手動處理遞歸。

5. 菜單數組轉換為嵌套樹形結構

[{ id: 1, menu: '水果', level: 1 }, { id: 2, menu: '橘子', level: 2, parentId: 1 } ]

[{ id: 1, menu: '水果', level: 1, children: [{ id: 2, menu: '橘子', level: 2, parentId: 1 }] }]

function convertToNestedTree(menuArray) {const idToMenuMap = {}; // 用于存儲菜單項的映射，通過id快速查找// 構建映射menuArray.forEach(item => {idToMenuMap[item.id] = item;});// 構建樹形結構const tree = [];menuArray.forEach(item => {if (!item.parentId) {// 如果沒有parentId，說明是根節點，直接添加到樹中tree.push(item);} else {// 如果有parentId，將當前項添加到父級的children數組中const parentMenu = idToMenuMap[item.parentId];if (parentMenu) {if (!parentMenu.children) {parentMenu.children = [];}parentMenu.children.push(item);}}});return tree;
}const menuArray = [{ id: 1, menu: '水果', level: 1 },{ id: 2, menu: '橘子', level: 2, parentId: 1 },];const nestedTree = convertToNestedTree(menuArray);
console.log(nestedTree);//[{ id: 1, menu: '水果', level: 1, children: [{ id: 2, menu: '橘子', level: 2, parentId: 1 }] }]

6. url 參數獲取的 API

在前端，使用 URLSearchParams 對象來獲取 URL 參數。這是一個原生 JavaScript 對象，可用于解析 URL 查詢參數。

// 假設 URL 為 https://example.com/page?name=John&age=25const urlParams = new URLSearchParams(window.location.search);// 獲取單個參數
const name = urlParams.get('name'); // 返回 'xx'
const age = urlParams.get('age');   // 返回 '25'// 獲取所有參數
const allParams = {};
urlParams.forEach((value, key) => {allParams[key] = value;
});console.log(allParams);
// 輸出：{ name: 'xx', age: '25' }

使用 URLSearchParams 對象從當前頁面的 URL 中提取參數。

7. 新版本發布后，怎么用技術手段通知用戶刷新頁面

在前端中，可以使用以下幾種技術手段來通知用戶刷新頁面以加載新版本：

  1. Service Worker 和 Cache 更新：

    • 使用 Service Worker 來緩存資源并控制頁面加載。
    • 當新版本發布時，Service Worker 可以檢測到更新，然后發送消息到頁面，通知用戶有新版本可用。
    • 頁面收到消息后，可以顯示一個通知或提示，引導用戶刷新頁面。

  2. WebSocket 或 Server-Sent Events (SSE)：

    • 使用 WebSocket 或 SSE 與服務器建立實時通信通道。
    • 當新版本發布時，服務器通過通道向客戶端發送消息。
    • 客戶端收到消息后，可以顯示通知并提示用戶刷新頁面。

  3. Polling：

    • 定期向服務器發起請求檢查是否有新版本。
    • 當服務器檢測到新版本時，返回相應的信息。
    • 頁面收到信息后，顯示通知并引導用戶刷新頁面。

  4. LocalStorage 或 IndexedDB 標記：

    • 在本地存儲（LocalStorage）或 IndexedDB 中保存一個標記，表示當前頁面的版本。
    • 當新版本發布時，將新版本的標記寫入本地存儲或 IndexedDB。
    • 頁面加載時檢查標記，如果檢測到新版本，顯示通知并引導用戶刷新頁面。

  5. 使用 Service Worker 的 skipWaiting 和 clients.claim：

    • 在 Service Worker 中使用 self.skipWaiting() 和 clients.claim() 來立即激活新版本的 Service Worker。
    • 在新版本的 Service Worker 中發送消息到頁面，通知用戶有新版本可用。
    • 頁面接收到消息后，顯示通知并引導用戶刷新頁面。

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/696103.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/696103.shtml
英文地址，請注明出處：http://en.pswp.cn/news/696103.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

如何使用Docker部署MongoDB并結合內網穿透實現遠程訪問本地數據庫

如何使用Docker部署MongoDB并結合內網穿透實現遠程訪問本地數據庫

文章目錄 前言1. 安裝Docker2. 使用Docker拉取MongoDB鏡像3. 創建并啟動MongoDB容器4. 本地連接測試5. 公網遠程訪問本地MongoDB容器5.1 內網穿透工具安裝5.2 創建遠程連接公網地址5.3 使用固定TCP地址遠程訪問 正文開始前給大家推薦個網站&#xff0c;前些天發現了一個巨牛的 …
閱讀更多...
2024最佳住宅代理IP服務商有哪些？

2024最佳住宅代理IP服務商有哪些？

跨境出海已成為了近幾年的最熱趨勢&#xff0c;大批量的企業開始開拓海外市場&#xff0c;而海外電商領域則是最受歡迎的切入口。新興的tiktok、Temu&#xff0c;老牌的Amazon、Ebay&#xff0c;熱門的Etsy、Mecari等等都是藍海一片。跨境入門并不難&#xff0c;前期的準備中不…
閱讀更多...
深入理解文件查看命令：cat、more、less、tail、head

深入理解文件查看命令：cat、more、less、tail、head

在Linux系統中&#xff0c;有許多命令用于查看文件的內容&#xff0c;其中包括cat、more、less、tail和head。這些命令提供了不同的方式來瀏覽文本文件&#xff0c;適用于各種查看需求。在本篇博客中&#xff0c;我們將深入介紹這些命令&#xff0c;并通過示例演示它們的用法。…
閱讀更多...
Spring Boot打war包部署到Tomcat，訪問頁面404 ！！！

Spring Boot打war包部署到Tomcat，訪問頁面404 ！！！

水善利萬物而不爭&#xff0c;處眾人之所惡&#xff0c;故幾于道&#x1f4a6; 文章目錄 Spring Boot打war包部署到Tomcat&#xff0c;訪問頁面404 &#xff01;&#xff01;&#xff01;解決辦法&#xff1a;檢查Tomcat版本和Jdk的對應關系&#xff0c;我的Tomcat是6.x&#x…
閱讀更多...
Sping基礎篇----掌握Sping的控制反轉/依賴注入的概念【實戰案例總結】

Sping基礎篇----掌握Sping的控制反轉/依賴注入的概念【實戰案例總結】

作為一名對技術充滿熱情的學習者&#xff0c;我一直以來都深刻地體會到知識的廣度和深度。在這個不斷演變的數字時代&#xff0c;我遠非專家&#xff0c;而是一位不斷追求進步的旅行者。通過這篇博客&#xff0c;我想分享我在某個領域的學習經驗&#xff0c;與大家共同探討、共…
閱讀更多...
SMMU介紹

SMMU介紹

SMMU&#xff08;System Memory Management Unit&#xff09;是一種硬件設備&#xff0c;其作用是在虛擬地址空間和物理地址空間之間提供地址轉換的功能。它通常用于處理虛擬化環境中的 I/O 設備&#xff0c;例如虛擬機中的設備訪問或者容器環境中的設備隔離。 SMMU 的主要作用…
閱讀更多...
KVM虛擬機的克隆方式

KVM虛擬機的克隆方式

話不多說&#xff0c;直接上操作 首先確定我們要克隆的模板機器&#xff0c;這樣可以方便我們后續克隆許多機器 IP獲取最好就是dhcp模式&#xff0c;這樣克隆出來的機器就不需要自己再去改ip了 確定需要克隆的模板機以后&#xff0c;先關機再執行克隆操作 virsh shutdown ser…
閱讀更多...
【SiamFC】《Fully-Convolutional Siamese Networks for Object Tracking》

【SiamFC】《Fully-Convolutional Siamese Networks for Object Tracking》

ECCV 2016 Workshops 文章目錄 1 Background and Motivation2 Related Work3 Advantages / Contributions4 Method5 Experiments5.1 Datasets and Metrics5.2 The OTB-13 benchmark5.3 The VOT benchmarks5.4 Dataset size 6 Conclusion&#xff08;own&#xff09;/ Future wo…
閱讀更多...
Android系統啟動流程

Android系統啟動流程

android的啟動流程是從底層開始進行的&#xff0c;具體如下所示&#xff1a; Android是基于Linux內核的系統&#xff0c;Android的啟動過程主要分為兩個階段&#xff0c;首先是Linux內核的啟動&#xff0c;然后是Android框架的啟動。 可以將Andorid系統的啟動流程分為以下五個…
閱讀更多...
【QT 5 +Linux下軟件桌面快捷方式+qt生成軟件創建桌面圖標+學習他人文章+第二篇：編寫桌面文件.desktop】

【QT 5 +Linux下軟件桌面快捷方式+qt生成軟件創建桌面圖標+學習他人文章+第二篇：編寫桌面文件.desktop】

【QT 5 Linux下軟件桌面快捷方式qt生成軟件創建桌面圖標學習他人文章第二篇&#xff1a;編寫桌面文件.desktop】 1、前言2、實驗環境3、自我學習總結-本篇總結1、新手的疑問&#xff0c;做這件事目的2、了解.desktop3、三個關鍵目錄以及文件編寫1、目錄&#xff1a;/opt/2、目錄…
閱讀更多...
【鴻蒙 HarmonyOS 4.0】開發工具安裝

【鴻蒙 HarmonyOS 4.0】開發工具安裝

一、準備開發環境 1.1、安裝IDE 鴻蒙應用開發需要使用配套的IDE——HUAWEI DevEco Studio。 DevEco Studio基于IntelliJ IDEA Community&#xff08;IDEA社區版&#xff09;構建&#xff0c;為鴻蒙應用提供了一站式開發環境&#xff0c;集成了開發、運行、調試以及發布應用的…
閱讀更多...
【leetcode刷題之路】面試經典150題（3）——哈希表+區間

【leetcode刷題之路】面試經典150題（3）——哈希表+區間

文章目錄 5 哈希表5.1 【哈希表】贖金信5.2 【數學】同構字符串5.3 【數學】單詞規律5.4 【哈希表】有效的字母異位詞5.5 【哈希表】字母異位詞分組5.6 【雙指針】兩數之和5.7 【數學】快樂數5.8 【哈希表】219. 存在重復元素 II5.9 【數學】最長連續序列 6 區間6.1 【數學】匯…
閱讀更多...
Stable Diffusion 模型分享：AstrAnime（Astr動畫）

Stable Diffusion 模型分享：AstrAnime（Astr動畫）

本文收錄于《AI繪畫從入門到精通》專欄&#xff0c;專欄總目錄&#xff1a;點這里。 文章目錄 模型介紹生成案例案例一案例二案例三案例四案例五 下載地址 模型介紹 AstrAnime 是一個動漫模型&#xff0c;畫風色彩鮮明&#xff0c;擅長繪制漂亮的小姐姐。 條目內容類型大模型…
閱讀更多...
fastjson解析自定義get方法導致空指針問題

fastjson解析自定義get方法導致空指針問題

背景 為了在日志中把出入參打印出來&#xff0c;以便驗證鏈路和排查問題&#xff0c;在日志中將入參用fastjson格式化成字符串輸出&#xff0c;結果遇到了NPE。 問題復現 示例代碼 public static void main(String[] args) {OrganizationId orgId new OrganizationId();N…
閱讀更多...
規模化強化學習 — 多任務強化學習

規模化強化學習 — 多任務強化學習

1 簡述 1.1 單任務強化學習&#xff08;STRL&#xff09; 在單任務強化學習中&#xff0c;一個無人機的AI系統可能被訓練來執行特定的任務&#xff0c;比如自主導航。在這個任務中&#xff0c;無人機需要學習如何有效地從起點飛行到終點&#xff0c;并避開障礙物。 舉例&#…
閱讀更多...
【Java多線程】分析線程加鎖導致的死鎖問題以及解決方案

【Java多線程】分析線程加鎖導致的死鎖問題以及解決方案

目錄 1、線程加鎖 2、死鎖問題的三種經典場景 2.1、一個線程一把鎖 2.2、兩個線程兩把鎖 2.3、N個線程M把鎖&#xff08;哲學家就餐問題&#xff09; 3、解決死鎖問題 1、線程加鎖 其中 locker 可以是任意對象&#xff0c;進入 synchronized 修飾的代碼塊, 相當于加鎖&…
閱讀更多...
Java SourceDataLine 播放音頻

Java SourceDataLine 播放音頻

Java SourceDataLine 播放音頻 1 依賴2 接口3 實現4 測試 項目Value音頻格式 添加依賴*.wav(JDK 原生支持)*.pcm(JDK 原生支持)*.au(JDK 原生支持)*.aiff(JDK 原生支持)*.mp3mp3spi.jar*.flacjflac-codec.jar 1 依賴 <dependency><groupId>com.googlecode.soundl…
閱讀更多...
?北郵復試刷題LCR 052. 遞增順序搜索樹__DFS (力扣119經典題變種挑戰)

?北郵復試刷題LCR 052. 遞增順序搜索樹__DFS (力扣119經典題變種挑戰)

LCR 052. 遞增順序搜索樹 給你一棵二叉搜索樹&#xff0c;請 按中序遍歷 將其重新排列為一棵遞增順序搜索樹&#xff0c;使樹中最左邊的節點成為樹的根節點&#xff0c;并且每個節點沒有左子節點&#xff0c;只有一個右子節點。 示例 1&#xff1a; 輸入&#xff1a;root [5,…
閱讀更多...
DataX - 全量數據同步工具

DataX - 全量數據同步工具

前言 今天是2024-2-21&#xff0c;農歷正月十二&#xff0c;相信今天開始是新的階段&#xff0c;盡管它不是新的周一、某月一日、某年第一天&#xff0c;盡管我是一個很講究儀式感的人。新年剛過去 12 天&#xff0c;再過 3 天就開學咯&#xff0c;開學之后我的大學時光就進入了…
閱讀更多...
TypeScript01：安裝TypeScript

TypeScript01：安裝TypeScript

一、TypeScript 官方網站&#xff1a;https://www.tslang.cn/docs/index.html 練習場&#xff1a;https://www.typescriptlang.org/zh/play 好處&#xff1a; 強類型語言&#xff0c;對JS弱類型的一個良好補充&#xff1b;TS利于大型項目團隊合作&#xff0c;可以一定程度…
閱讀更多...
最新文章

Copyright @ 2022~2023