获取query传参的token

这篇博客主要介绍了JavaScript中用于获取URL查询字符串的方法getQueryString(),以及如何使用它来检查和处理token。通过decodeURIComponent()函数解码查询字符串,然后将结果存储到sessionStorage中。该方法对于前端应用的身份验证和状态管理至关重要。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

方法

// 解析参数
getQueryString (name) {
var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i')
var r = window.location.search.substr(1).match(reg)
if (r != null) return (r[2]); return null
},

// 查看token
getToken () {
let queryName = this.getQueryString(GLOBAL_HIDE_MENU)
if (queryName !== null) {
queryName = decodeURIComponent(queryName) 函数可把字符串作为 URI 组件进行j解码。

//encodeURIComponent() 函数可把字符串作为 URI 组件进行编码。
sessionStorage.setItem(GLOBAL_CHANGE_MENU, queryName)   
}
},

<think>好的,我现在需要回答用户关于React路由三种传参方式及参数获取方法的问题。用户之前已经询问过state传参的具体实现,现在想了解三种方式。首先,我需要确认React路由中常见的传参方式有哪些。根据之前的回答和引用,常见的三种应该是params、search(query)和state。 接下来,我需要整理每种传参方式的定义、使用方法、参数获取方式以及优缺点。要确保每种方式都有清晰的代码示例,并且引用正确的资料。例如,引用[1]提到了searchParams传参,引用[2]和[5]提到了query和state,引用[4]提到了params。需要注意用户提供的引用中可能存在的差异,比如在类组件和函数组件中的不同用法,尤其是history和hooks的区别。 然后,需要比较三种方式的区别,帮助用户理解适用场景。例如,params适合URL中必须的参数,search适合可选参数,state适合敏感或大量数据。同时,要提到刷新后的参数保留情况,如state在刷新后会丢失,而params和search不会。 需要检查是否有遗漏的细节,比如在函数组件中使用useParams、useSearchParams和useLocation,而在类组件中可能需要通过this.props.match.params等方式获取。此外,引用[3]提到React Native中的参数获取,但用户的问题是关于React的,所以可能不需要涉及,但需注意区分。 最后,确保回答结构清晰,分点说明,代码示例正确,并附上相关问题。同时,要参考用户之前的提问,确保信息一致,比如之前提到的state传参的注意事项,现在需要整合到三种方式的比较中。还要验证引用来源的正确性,避免混淆不同传参方式,比如确认query和searchParams是否属于同一类传参方式,根据引用[1]和[5],可能search和query是同一方式的不同名称,需要统一术语。</think>根据React路由传参的常见实践和引用资料,以下是三种主要传参方式及其参数获取方法的详细说明: --- ### 一、Params参数(动态路由传参) #### 1. 传参方式 ```jsx // 声明式导航(Link) <Link to="/user/123/Alice">用户详情</Link> // 编程式导航(函数组件) const navigate = useNavigate(); navigate('/user/123/Alice'); // 类组件编程式导航 this.props.history.push('/user/123/Alice'); ``` #### 2. 路由配置 ```jsx <Route path="/user/:id/:name" element={<UserDetail />} /> ``` #### 3. 获取参数 ```jsx // 函数组件(React Router v6) import { useParams } from 'react-router-dom'; const { id, name } = useParams(); // 类组件 const { id, name } = this.props.match.params; ``` #### 特点 - 参数显示在URL路径中:`/user/123/Alice` - **刷新页面参数保留** - 必须预先定义路由参数[^4][^5] --- ### 二、Search/Query参数(URL查询字符串) #### 1. 传参方式 ```jsx // 声明式导航 <Link to="/search?keyword=react&page=1">搜索</Link> // 编程式导航(函数组件) navigate('/search', { search: 'keyword=react&page=1' }); // 类组件 this.props.history.push({ pathname: '/search', search: 'keyword=react&page=1' }); ``` #### 2. 获取参数 ```jsx // 函数组件(React Router v6) import { useSearchParams } from 'react-router-dom'; const [searchParams] = useSearchParams(); const keyword = searchParams.get('keyword'); const page = searchParams.get('page'); // 类组件(通用方法) const query = new URLSearchParams(this.props.location.search); const keyword = query.get('keyword'); ``` #### 特点 - 参数显示在URL中:`/search?keyword=react&page=1` - **刷新页面参数保留** - 适合非敏感的可选参数[^1][^5] --- ### 三、State参数(隐式传参) #### 1. 传参方式 ```jsx // 声明式导航 <Link to="/profile" state={{ userId: 123, authToken: 'secret_token' }} >个人资料</Link> // 编程式导航(函数组件) navigate('/profile', { state: { userId: 456, authToken: 'another_token' } }); // 类组件 this.props.history.push({ pathname: '/profile', state: { userId: 789 } }); ``` #### 2. 获取参数 ```jsx // 函数组件 import { useLocation } from 'react-router-dom'; const { state } = useLocation(); const { userId, authToken } = state || {}; // 类组件 const { userId } = this.props.location.state || {}; ``` #### 特点 - **参数不在URL中显示** - 刷新页面后参数会丢失(需配合`sessionStorage`持久化)[^2][^5] - 适合传递敏感或复杂数据结构[^2] --- ### 对比总结 | 特征 | Params参数 | Search/Query参数 | State参数 | |---------------|---------------|------------------|----------------| | URL可见性 | ✅ | ✅ | ❌ | | 参数保留性 | 刷新保留 | 刷新保留 | 刷新丢失 | | 路由配置需求 | 需要预定义 | 无需定义 | 无需定义 | | 数据类型支持 | 字符串 | 字符串 | 任意类型 | | 典型应用场景 | 资源定位 | 筛选条件 | 敏感数据传递 | --- ### 最佳实践建议 1. **安全性要求高**时优先使用`state`参数(如身份令牌) 2. **需要分享URL**时使用`params`或`search`参数 3. 复杂对象数据推荐使用`state`参数(支持JSON对象) 4. 分页查询建议使用`search`参数:`/products?page=2&size=10` 5. 使用TypeScript时定义参数类型接口[^2] ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值