Question

在我的应用中，有许多静态页面定义“主页”或“营销”站点，例如/ home，/ about，/ pricing等。任何人都可以随时访问这些路由。

然后，有应用程序本身，当前位于“ /”位置。它具有确保未通过身份验证的任何试图访问“ /”的人都将重定向到“ / home”的逻辑。

browser.url(`https://duckduckgo.com/`);
$("#search_form_input_homepage").setValue("webdriverio");
$("#search_button_homepage").click();
const expected: string = "WebdriverIO · Next-gen WebDriver test framework for Node.js";
expect($("div#r1-0 h2.result__title a.result__a").getText()).to.contain(expected);

在该应用程序内，可能需要一整套其他路由，例如仪表板，用户配置文件等。为每个路由和组件设置身份验证挂钩并不现实，所以我想知道是否如果用户未通过身份验证，则有一种方法可以确保由App.js的子元素所呈现的任何组件也都重定向回“ / home”。

Answer 1

我建议您使用某种privateroute组件，在其中检查令牌，然后返回一个通过的组件，或者在失败时重定向，例如：

import React from 'react';
import { Route, Redirect } from 'react-router-dom';
import Auth from '../../Modules/Auth';

const PrivateRoute = ({ component: Component, ...rest }) => (

    <Route {...rest} render={(props) => (
      Auth.isUserAuthenticated() === true
        ? <Component {...props} />
        : <Redirect to={{
            pathname: '/login',
            state: { from: props.location }
          }} />
    )} />
  )

  export default PrivateRoute;

然后在要导入的Auth文件中编写一个检查令牌的类，但是它可能是：

class Auth {

    /**
     * Authenticate a user. Save a token string in Local Storage
     *
     * @param {string} token
     */
    static authenticateUser(token) {
      localStorage.setItem('token', token);
    }

    /**
     * Check if a user is authenticated - check if a token is saved in Local Storage
     *
     * @returns {boolean}
     */
    static isUserAuthenticated() {
      return localStorage.getItem('token') !== null;
    }

    /**
     * Deauthenticate a user. Remove a token from Local Storage.
     *
     */
    static deauthenticateUser() {
      localStorage.removeItem('token');
    }

    /**
     * Get a token value.
     *
     * @returns {string}
     */

    static getToken() {
      return localStorage.getItem('token');
    }

  }

  export default Auth;

然后在您的开关中，您可以编写如下内容：

<Switch>
    <PrivateRoute path="/randomroute" component={ComponentWithinTheApp} />
</Switch>

如何确保受保护的路由中包含的所有路由也得到保护？

1 个答案: