Question

我目前正在尝试使用Auth0进行身份验证的身份验证应用，而我是TypeScript的新手。

已经在我的Auth.js中尝试了下面的代码，并且工作正常，但是当我尝试将Auth.js文件迁移到Auth.ts时，我却因为错误而红肿了

类型Auth上不存在属性“历史记录”

类型Auth e.t.c的属性'userProfile'不存在

        import auth0 from "auth0-js";
    const REDIRECT_ON_LOGIN = "redirect_on_login";
   export default class Auth {
     constructor(history) {
      this.history = history;
      this.userProfile = null;
      this.requestedScopes = "openid profile email";
      this.auth0 = new auth0.WebAuth({
      domain: process.env.REACT_APP_AUTH0_DOMAIN,
      clientID: process.env.REACT_APP_AUTH0_CLIENT_ID,
      redirectUri: process.env.REACT_APP_AUTH0_CALLBACK_URL,
      audience: process.env.REACT_APP_AUTH0_AUDIENCE,
      responseType: "token id_token",
      scope: this.requestedScopes
     });
    }

  login = () => {
    localStorage.setItem(
      REDIRECT_ON_LOGIN,
      JSON.stringify(this.history.location)
    );
    this.auth0.authorize();
  };

  handleAuthentication = () => {
    this.auth0.parseHash((err, authResult) => {
      if (authResult && authResult.accessToken && authResult.idToken) {
        this.setSession(authResult);
        const redirectLocation =
          localStorage.getItem(REDIRECT_ON_LOGIN) === "undefined"
            ? "/"
            : JSON.parse(localStorage.getItem(REDIRECT_ON_LOGIN));
        this.history.push(redirectLocation);
      } else if (err) {
        this.history.push("/");
        alert(`Error: ${err.error}. Check the console for details`);
        console.log(err);
      }
      localStorage.removeItem(REDIRECT_ON_LOGIN);
    });
  };

我希望能够使用react＆Typescript实现auth0身份验证

Answer 1

您需要安装Auth0类型：

cdo mergetime file1.nc file2.nc combined_file.nc

或这个：

npm i @types/auth0

，如果这些解决方案不起作用，则将npm i @types/auth0-js文件中的Auth0软件包排除在外，如下所示：

tsconfig.js

只需找到Auth0指令并将其排除。

Answer 2

在打字稿中，“class”也是一种类型。因此，当您使用“类”时，您正在创建两件事。

1- javascript 类函数

2- 打字稿类型

由于类也被视为类型，因此您必须指定属性和方法的类型。

class Auth{
  history:findTheTypeOfHistory;
  userProfile:typeofUserProfile
  .
  .
 }

带有React和TypeScript的Auth0

2 个答案: