前端面试问题(jwt/布局/vue数组下标/扁平化/菜单树形/url api/新版本)

已于 2024-02-21 09:42:39 修改
阅读量1k 收藏 9
点赞数 9
分类专栏： 前端面试相关 文章标签： 前端 面试 vue.js javascript
于 2024-02-21 09:39:35 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Robinwang1128/article/details/136193204
版权

前端面试问题(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=25

const 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 中发送消息到页面，通知用户有新版本可用。
    • 页面接收到消息后，显示通知并引导用户刷新页面。
狐说狐有理
关注
  • 9
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
JWT实现鉴权
柠檬树
03-10 8840
一、前言 JWT全称JSON Web Token，是一种基于JSON的，用于在网络上声明某种主张的令牌(Token)。JWT通常由三部分组成：头信息（header）、消息体（payload）、签名(signature)。 头信息（Header）指定了该JWT使用的签名算法： header = '{"alg":"HS256","typ":"...
【前端笔记】JWT鉴权逻辑：
Bole6666666的博客
09-21 188
JWT（JSON Web Token）是一种用于身份验证和授权的开放标准。它由三部分组成：头部（Header）、载荷（Payload）和签名（Signature）。JWT通常用于前后端分离的应用程序中，用于验证用户身份和授权访问
jwt鉴权
qq_37291761的博客
03-16 630
背景： 一个普通项目配置在一台服务器上并发性并不高，但是像一些大型的电商 门户网站，每一天的访问量过千万，也就是说在同一时间可能会有近万人访问。一台服务器的并发量就难以满足。这个时候人们 就想到了利用分布式架构。采用集群的方式来提高并发性。 一般会配一个nginx集群来进行反向代理，使得多个服务器上分担的压力均衡，达到负载均衡。如图 这个时候就存在一个问题，传统方式我们登陆注册需要将登陆...
vue数组和对象数据改变后页面不能响应
Serena_tz的博客
06-09 5378
由于 JavaScript 的限制，Vue不能检测数组和对象的变化，在我们改变数组和对象的数据时，页面没有办法响应式改变。因此，我们要采用一些特殊的方法来让页面响应数组和对象的改变。 数组 Vue 不能检测以下数组的变动，让页面响应式改变： 当你利用索引直接设置一个数组项时，例如： vm.items[indexOfItem] = newValue 当你修改数组的长度时，例如： vm.items.length = newLength 举个例子： var vm = new Vue({ data:
vue2中不支持通过数组下标更改数组的值，无法做到响应式，页面没有重新渲染
前端笔记——放弃很容易,但坚持一定很酷
10-24 609
vue响应式
前端-js/vue/react/组件开发/面试指南
最新发布
06-17
回源，当有用户访问某㇐个 URL 的时候，如果被解析到的那个 CDN 节点没有缓存响应的内容，或者是缓存已经到期，就会回源站去获取。如果没有人访问， 那么 CDN 节点不会主动去源站拿的。 回源的策略间接决定了缓存的...
2023/08/11 教学工具fastapi+tortoise ，后端基本框架
08-11
综上所述，这个教学资源将引导你通过FastAPI和Tortoise构建一个具备JWT认证、中间件验证、菜单设计以及RBAC权限管理的Python后端框架。学习这些技能对于任何希望在后端开发领域深化的人来说都是极其有价值的。
基于springboot+vue实现的在线考试系统前端组件化 后端采用SpringBoot+JPA++Swagger2+JWT校
09-08
这是一款功能简单实用的在线考试系统，后台采用springboot开发，前台采用vue.js。 系统支持单选题、多选题、判断题； 学生角色可以查看参加考试，教师和管理...前端采用Vue+AntDesign，组件化拆分，方便维护和二次开发
小说阅读器与采集系统源码+项目说明（前端vue-ssr后端RestfulAPI 架构,redis和mysql的存储系统）.zip
03-15
【资源说明】 1、该资源包括项目的全部源码，下载可以直接使用！...小说阅读器与采集系统源码+项目说明（基于node-koa的开源小说系统前端vue-ssr,后端RestfulAPI 架构.jwt身份认证,redis和mysql的存储系统）.zip
【vue 如何解决响应式丢失】
前端-CV全粘工程师
11-13 1023
对数组和对象进行不当的修改：对于数组和对象，只有使用 Vue 提供的一些方法（如 push()、pop()、splice()、set() 等）进行修改才会触发响应式更新。使用非响应式对象或属性：在 Vue 中，只有使用 Vue 实例的 data 对象中的属性或使用 Vue.set() 方法添加的属性才是响应式的。在使用 Vue 的异步更新机制（如 nextTick()）时，应该避免在回调函数中对数据进行修改，否则可能会出现响应式丢失的问题。对数组和对象只使用 Vue 提供的一些方法进行修改。
Vue3，什么情况下数据会丢失响应式呢？
weixin_46683645的博客
07-25 6983
vue3，数据丢失响应式的几种情况
vue3解构赋值失去响应式引发的思考
Web_boom的博客
10-06 2108
它将VUE的各个知识点进行了总结，整理成了《Vue 开发必须知道的36个技巧》。内容比较详实，对各个知识点的讲解也十分到位。
vue3给数组赋值丢失响应式的解决方法
小多的博客
07-07 8861
由于vue3使用proxy，对于对象和数组都不能直接整个赋值。只有push或者根据索引遍历赋值才可以保留reactive数组的响应性 或者 或者 例子 效果图：
分析一下vue3下会造成响应式丢失的情况
大乌鸦
08-08 2508
我们一开始接触vue3的时候，会对这个问题十分的不解，只是知道有这个问题而不知其根，今天就来讲讲这个问题。obj = test;//在vue2的响应式中，人们习惯直接赋值了。在进入到vue3的时候，大部分的开发者没有看文档或者基于vue2的习惯，会进行这样的赋值情况。比如对象的再次初始化的情况。通过reactive()包含的对象是进行了内部的proxy代理，因此具有响应式。但是像test这个对象，它是没有进行数据劫持的，而对象赋值的时候实际上是引用地址赋值。
前端鉴权的10种方式
椰卤工程师的个人博客
10-09 3497
鉴权(Authentication) 在信息安全领域是指对于一个声明者所声明的身份权利，对其所声明的真实性进行鉴别确认的过程。
JWT及鉴权
liu4461431的博客
05-25 4242
JWT及鉴权知识点总结
JWT学习笔记_01：概念+为什么+认证流程+优缺点
耿鬼不会笑的博客
01-27 748
JWT学习笔记_上篇 本文基于B站UP主 【编程不良人】 视频教程 【 JWT认证原理、流程整合springboot实战应用,前后端分离认证的解决方案】 进行整理记录，仅用于个人学习/交流使用 视频连接：https://www.bilibili.com/video/BV1i54y1m7cP 官方资料：http://www.baizhiedu.xin JWT学习笔记上篇： JWT学习笔记下篇： 目录标题JWT学习笔记_上篇一、什么是JWT二、JWT能做什么三、为什么使用JWT基于传统的Session认证基
JWT面试常见问题
热门推荐
Mingju's Blog
11-12 1万+
JWT面试常见问题 jwt和security的对比： JWT的优点： 无需再服务端存储用户数据，减轻服务端压力 轻量级，json风格，比较简单 跨语言 JWT的缺点： token一旦签发，无法修改 无法更新token有效期，用户登录状态刷新难以实现 无法销毁一个token，服务端不能对用户状态进行绝对控制 不包含权限控制 SpringSecurity： 优点： 用户信息保存再服...
gin-jwt/v2 与 "github.com/golang-jwt/jwt/v4" 使用jwt 冲突
03-17
gin-jwt/v2 和 "github.com/golang-jwt/jwt/v4" 都是 Go 语言中用于处理 JSON Web Token (JWT) 的库，它们之间可能存在一些使用上的冲突。 gin-jwt/v2 是一个专门为 Gin 框架设计的 JWT 中间件，它提供了一些方便的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

狐说狐有理

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值