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

时间:2019-08-01 17:21:33

标签: reactjs react-router

在我的应用中,有许多静态页面定义“主页”或“营销”站点,例如/ 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”。

1 个答案:

答案 0 :(得分:0)

我建议您使用某种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>