小编Tim*_*nen的帖子

使用 Flow Typings 反应 useRef Hook

我正在使用带有 Flow 类型的 React useRef,并且我正在尝试为第三方 Web 组件库编写一个包装器组件。

Web 组件需要一个 changeCallback 函数,我正在使用 ref 将其分配给 ref。

function RadioButtonGroup({ onChange, children }) {
    const ref: { current: null | ElementRef<ElementType> = React.useRef(null);

    React.useEffect(() => {
        if (ref.current) ref.current.changeCallback = onChange;
    }, [onChange]);

    return <web-component ref={ref}>{children}</web-component>
}
Run Code Online (Sandbox Code Playgroud)

由于 HTMLElement 不包含名为 changeCallback 的属性,因此流程会引发错误。

无法分配给handleChangeref.current.changeCallback因为属性changeCallback缺失 HTMLElement

我尝试使用这样的属性扩展“ElementType”

ElementRef<ElementType & { changeCallback: Function }>
Run Code Online (Sandbox Code Playgroud)

但这会导致以下错误:

无法实例化,ElementRef因为对象类型 [1] 不是 React 组件。

Web 组件不会在更改时触发“更改”事件。它执行函数changeCallback。这是库的文档。

// MyComponent.js

class MyComponent extends Component { …
Run Code Online (Sandbox Code Playgroud)

web-component reactjs flowtype react-hooks

8
推荐指数
1
解决办法
3081
查看次数

JWT客户凭证授予的存储位置

我有一个NodeJS Express应用程序,该应用程序通过客户端凭据授予对Auth Server进行身份验证。我收到的令牌用于从API加载数据。

在整个应用程序中存储令牌的最佳实践是什么?

请注意,JWT不是特定于用户的,因为我的Express App是客户端。

javascript node.js express jwt openid-connect

5
推荐指数
1
解决办法
274
查看次数

vue-apollo在路由器保护中执行graphql查询

我有一个用户可以注册活动的应用程序。用户注册后,便可以访问以前无法访问的路线。

我正在对我的api请求使用graphql。我的路由守卫中的代码如下所示:

router.beforeEach(async (to, from, next) => {
  if (to.meta.signUpRequired && from.name) {
    const { data: { getCurrentUser } } 
      = await apolloProvider.defaultClient.query({
      query: USER_INFO_QUERY
    });
    if (getCurrentUser && getCurrentUser.isCollectionAttendee) {
      return next();
    }
    return next('/');
  }
  return next();
});
Run Code Online (Sandbox Code Playgroud)

这样工作良好,并且每次路由更改时都不会执行请求,因为vue-apollo会缓存结果。我的问题是,如果用户注册并尝试切换路由,则不能这样做,因为仍然使用查询的缓存结果。

我不想在每次更改路由之前都使用仅网络的fetchPolicy。

我该如何解决?

javascript graphql vuejs2 vue-apollo

5
推荐指数
1
解决办法
291
查看次数