Блог

Главная - Вопросы по программированию - Реагирующий маршрутизатор, защита статических изображений

Реагирующий маршрутизатор, защита статических изображений

#javascript #reactjs #react-router

#javascript #reactjs #реагирующий маршрутизатор

Вопрос:

Я создал веб-сайт с использованием react. Изображения веб-страниц доступны с помощью URL, например — http://localhost:3000/1.jpg

Я хочу защитить и не отображать эти изображения внутри общедоступной папки, я попробовал приведенный ниже код, он не работает, если я указываю расширение точки имени изображения в URL, оно работает, если это изображение имени отсутствует в общедоступной папке

 import React, { Component } from "react";
import { BrowserRouter, Route, Switch } from "react-router-dom";
import App from "../App";
import PageNotFound from "../components/PageNotFound/PageNotFound";

class Router extends Component {
  render() {
    return (
      <BrowserRouter>
        <Switch>
          <Route exact path="/" component={App} />
          <Route path="*" component={PageNotFound} />
        </Switch>
      </BrowserRouter>
    );
  }
}

export default Router;

Комментарии:

1. Можете ли вы уточнить? Вы не хотите, чтобы пользователи видели изображения в вашем public каталоге? Как они должны видеть изображения вместо этого? И если они вообще не должны их видеть, почему они в вашем public каталоге

2. Я не хочу, чтобы пользователи видели изображения в общедоступном каталоге, к изображениям можно получить доступ по URL, чего я хочу избежать.

3. Может быть, я не понимаю, но как браузер пользователя должен загружать изображения, если вы не хотите, чтобы они были доступны?

4. Да, вы правы, я думал, что будет какой-то способ не позволить пользователю видеть это изображение с помощью url.

5. Вы можете использовать .htaccess для предотвращения прямого доступа к изображениям из общей папки

Ответ №1:

Предлагается поместить изображения в папку public/images (обычно по соглашению), а затем сделать что-то вроде этого

 import React, { Component } from "react";
import { BrowserRouter, Route, Switch } from "react-router-dom";
import App from "../App";
import PageNotFound from "../components/PageNotFound/PageNotFound";

class Router extends Component {
  render() {
    return (
      <BrowserRouter>
        <Switch>
          <Route exact path="/" component={App} />
          <Route path="*" component={PageNotFound} />
          <Route path="/images/public/*" component={PageNotFound} />
        </Switch>
      </BrowserRouter>
    );
  }
}

export default Router;