Question

React.js中有什么类似的包/服务吗？

我想在React.js的每个组件中调用下面的函数作为包/服务。我怎么能这样做？

function () {
    setToken (token,expiration) {
        localStorage.setItem('token',token)
        localStorage.setItem('expiration',expiration)
    },
    getToken () {
        var token = localStorage.getItem('token')
        var expiration = localStorage.getItem('expiration')

        if(!token || !expiration)
            return null

        if(Date.now() > parseInt(expiration)) {
            this.destroyToken()
            return null
        }
        else {
            return token
        }
    },
    destroyToken () {
        localStorage.removeItem('token')
        localStorage.removeItem('expiration')
    },
    isAuthenticated () {
        if(this.getToken()) {
            return true
        }
        else {
            return false
        }
    }
    }
}

Answer 1

在您的组件中，导入您的服务：

import Token from "./services/token.js";

token.js

export default {
    //token logic
}

示例：https://codesandbox.io/s/rmwokj6rrq

Answer 2

要在整个应用程序中共享值和功能，您可以使用Context API。

您使用Provider向子组件提供这些功能，并使用Consumer在子组件中访问它们。

const AuthenticationContext = React.createContext();
const { Provider, Consumer } = AuthenticationContext;

function Login(props) {
  return (
    <Consumer>
      {
        value=>
        <button onClick={value.login}>Login</button>
      }
    </Consumer>
  );
}

function Logout() {
  return (
    <Consumer>
      {
        value=>
        <button onClick={value.logout}>Logout</button>
      }
    </Consumer>
  );
}

function AnotherComponent() {
  return (
    <Consumer>
      {
        value=>{
          return value.isAuthenticated?
            <p>Logged in</p>:
            <p>Not Logged in</p>
        }
      }
    </Consumer>
  );
}

class App extends React.Component {
  constructor(props) {
    super(props);
    this.setToken = ()=> {
      this.setState({
        isAuthenticated: true
      });
    }
    this.destroyToken = ()=> {
      this.setState({
        isAuthenticated: false
      });
    }
    this.state = {
      isAuthenticated: false,
      login: this.setToken,
      logout: this.destroyToken
    }
  }
  
  render() {
    return (
      <Provider value={this.state}>
        <Login />
        <Logout />
        <AnotherComponent />
      </Provider>
    );
  }
}
ReactDOM.render(<App />, document.getElementById("root"));

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root"></div>

注意：如果您只想调用这些函数，则可以从此文件中导出它们。

但是你不能将它们写成函数，语法不正确。

export default {
  setToken: (token,expiration)=>{
    localStorage.setItem('token',token)
    localStorage.setItem('expiration',expiration)
  },
}

在文件中你想要使用它们，

import Auth from 'file';
Auth.setToken()

Answer 3

没有任何支持服务\包的反应与角度相比，因为角度只是视图，而角度是框架。当你使用反应时，你正在使用香草（或非香草）js。

在你的情况下，你应该这样做：

const TOKEN_KEY =＆＃39;令牌＆＃39 ;; const EXPRIATION_KEY =＆＃39;到期＆＃39;;

export function setToken (token,expiration) {
        localStorage.setItem(TOKEN_KEY,token)
        localStorage.setItem(EXPRIATION_KEY ,expiration)
}

export function getToken () {
        var token = localStorage.getItem(TOKEN_KEY)
        var expiration = localStorage.getItem(EXPRIATION_KEY)

        if(!token || !expiration)
            return null

        if(Date.now() > parseInt(expiration)) {
            this.destroyToken()
            return null
        }
        else {
            return token
        }
}

export function destroyToken () {
        localStorage.removeItem(TOKEN_KEY)
        localStorage.removeItem(EXPRIATION_KEY )
    }


export function isAuthenticated () {
        if(this.getToken()) {
            return true
        }
        else {
            return false
        }
    }
}

然后，在您的组件中只导入相关的功能

import { setToken } from '~yourfilename~';
...
...
setToken(...,...)

注意：似乎函数getToken仅在私人使用中使用（仅适用于那些组件），如果是，则不应该导出它。

函数inside.js中的函数

3 个答案: