新的 react 和使用身份验证/登录的应用程序的工作。它目前工作但感觉一起被黑了。现在我的 isAuthenticated 状态位于我的 routes.js 中，如下所示:

class Routes extends Component {

    constructor(props) {
        super(props);

        this.state = {
            isAuthenticated: false,
         }
     }

在我的登录页面上，我需要知道用户何时通过身份验证才能将他们重定向到 home 页面。允许访问和操作此 isAuthenticated 状态的最佳设计模式是什么？我目前的设置方式是我有一个函数可以在 routes.js 中设置状态并将状态作为 prop 发送，如下所示:

 setAuthenticated = (isAuthenticated) => {
        this.setState({isAuthenticated});
    }

在路由器下面...

<Route path="/" exact component={() =>
                            <div>
                                <Login
                                    isAuthenticated={this.state.isAuthenticated}
                                    setAuthenticated={this.setAuthenticated}
                            </div>
                        } />

是的，我知道这是一个糟糕的设计，因为这会改变本应不可变的 Prop 值。这也很糟糕，因为当我在 login.js 中更改此值时，它会导致多次不必要的重新呈现。我应该将 isAuthenticated 声明为某种类型的全局变量吗？顺便说一句，我没有使用任何状态管理。

编辑:我正在设置 isAuthenticated 基于我的服务器的响应，确认正确的登录名/密码组合。

最佳答案

处理 isAuthenticated 仅在state 表示用户每次刷新页面都将未通过身份验证。这不是真正的用户友好! :)

因此，登录页面应该存储一个access_token (来自您的后端)在 cookies 中或 localStorage 浏览器的。一个access_token证明用户已通过身份验证并验证其身份。你通常会通过这个 access_token对您的服务器的每个下一个请求，以检查该用户是否被允许访问他请求的数据，或者是否被允许创建、编辑和删除他试图创建、编辑和删除的东西。

然后你可以查看这个access_token在所有其他页面上，如果他不再通过身份验证，则将用户重定向到登录页面。

关于 access_token 之间区别的简要说明 和 refresh_token – 这将帮助您理解下面的代码，但如果您已经熟悉它，请随时跳过。

您的后端可能使用 OAuth2 ，这是当今最常见的身份验证协议(protocol)。与 OAuth2 ，您的应用向服务器发出第一个请求，其中包含用户的用户名和密码以进行身份​​验证。一旦用户通过身份验证，他将收到 1) access_token。 ，通常在一小时后过期，以及 2) refresh_token ，它会在很长一段时间(几小时、几天)后过期。当 access_token过期，而不是再次询问用户他的用户名和密码，你的应用程序发送 refresh_token到服务器获取新的access_token对于这个用户。

关于 cookies 之间差异的简要说明 和 localStorage – 也可以随意跳过它!

localStorage是两者之间最新的技术。这是一个简单的键/值持久化系统，似乎非常适合存储 access_token及其值(value)。但我们还需要保留其到期日期。我们可以存储名为 expires 的第二个键/值对但在我们这边处理会更合乎逻辑。

另一方面，cookies有一个本地人expires属性(property)，这正是我们所需要的! cookies是一项古老的技术，对开发人员不是很友好，所以我个人使用 js-cookie ，这是一个小型图书馆来操纵cookies .它也使它看起来像一个简单的键/值持久性系统:Cookies.set('access_token', value)然后Cookies.get('access_token') .

其他亲为cookies : 他们是交叉的subdomains !如果您的登录应用程序是 login.mycompany.com并且您的主要应用程序是 app.mycompany.com , 然后你可以创建一个 cookie在登录应用程序上并从主应用程序访问它。这对于 LocalStorage 是不可能的.

以下是我用于身份验证的一些方法和特殊的 React 组件:

isAuthenticated()

import Cookies from 'js-cookie'

export const getAccessToken = () => Cookies.get('access_token')
export const getRefreshToken = () => Cookies.get('refresh_token')
export const isAuthenticated = () => !!getAccessToken()

验证()

export const authenticate = async () => {
  if (getRefreshToken()) {
    try {
      const tokens = await refreshTokens() // call an API, returns tokens

      const expires = (tokens.expires_in || 60 * 60) * 1000
      const inOneHour = new Date(new Date().getTime() + expires)

      // you will have the exact same setters in your Login page/app too
      Cookies.set('access_token', tokens.access_token, { expires: inOneHour })
      Cookies.set('refresh_token', tokens.refresh_token)

      return true
    } catch (error) {
      redirectToLogin()
      return false
    }
  }

  redirectToLogin()
  return false
}

redirectToLogin()

const redirectToLogin = () => {
  window.location.replace(
    `${getConfig().LOGIN_URL}?next=${window.location.href}`
  )
  // or history.push('/login') if your Login page is inside the same app
}

认证路由

export const AuthenticatedRoute = ({
  component: Component,
  exact,
  path,
}) => (
  <Route
    exact={exact}
    path={path}
    render={props =>
      isAuthenticated() ? (
        <Component {...props} />
      ) : (
        <AuthenticateBeforeRender render={() => <Component {...props} />} />
      )
    }
  />
)

AuthenticateBeforeRender

class AuthenticateBeforeRender extends Component {
  state = {
    isAuthenticated: false,
  }

  componentDidMount() {
    authenticate().then(isAuthenticated => {
      this.setState({ isAuthenticated })
    })
  }

  render() {
    return this.state.isAuthenticated ? this.props.render() : null
  }
}

关于javascript - React - 处理登录和身份验证的最佳方式是什么？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49819183/