帶有 React 和 TypeScript 的 Auth0

Question

我目前正在嘗試使用 Auth0 實現一個 React 應用程序進行身份驗證，而且我是打字稿的新手。

在我的Auth.js嘗試了下面的代碼，它工作正常，但是當我嘗試將我的Auth.js文件遷移到Auth.ts我得到了帶有錯誤的紅色波浪線

類型 Auth 上不存在屬性“歷史”

類型 Auth 等中不存在屬性“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 類型：

npm i @types/auth0

或者這個：

npm i @types/auth0-js

如果這些解決方案不起作用，請像這樣在tsconfig.js文件中排除Auth0包：

"exclude": [
        "node_modules/auth0-js"
    ]

只需找到 Auth0 目錄並將其排除即可。

Answer 2

在打字稿中，“類”也是一種類型。 因此，當您使用“類”時，您正在創建兩件事。

1- javascript類函數

2-打字稿類型

由於類也被視為類型，因此您必須指定屬性和方法的類型。

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