Отключение контекстного меню в вашем веб-приложении: простое руководство (React, Vue, Angular…

Введение:

В мире веб-разработки могут быть моменты, когда вы хотели бы ограничить определенные функции браузера для конечного пользователя. Одной из таких функций является контекстное меню, более известное как щелчок правой кнопкой мыши или функция проверки элемента. Хотя эта функция имеет решающее значение на этапе разработки и отладки, вы можете отключить ее в производственной среде, чтобы защитить исходный код от просмотра или копирования.

Сегодня я рад представить простой и эффективный пакет, который может помочь вам в этом — отключить контекстное меню.

Что такое «отключить контекстное меню»?

disable-context-menu — это легкий и простой в интеграции пакет, который эффективно отключает контекстное меню в ваших веб-приложениях. Вы можете использовать его в различных средах JavaScript, таких как React, Vue, Angular или даже в приложениях vanilla JS.

Использование:

Для начала импортируйте пакет в корень вашего приложения:

import { disableContextMenu } from 'disable-context-menu';

Затем вызовите функцию disableContextMenu() в своих приложениях, желательно, когда приложение находится в производственной среде. Вот как вы можете это сделать:

if (process.env.NODE_ENV === 'production') {
  disableContextMenu();
}

Примеры:

Давайте рассмотрим, как использовать эту библиотеку в различных средах JavaScript:

Реакция:

Для приложения React вы можете добавить функцию в основную запись вашего приложения следующим образом:

import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import { disableContextMenu } from 'disable-context-menu';
import App from './components/App';

const root = ReactDOM.createRoot(document.getElementById('react-app'));

if (process.env.NODE_ENV !== 'development') {
  disableContextMenu();
}

root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

Vue:

В Vue вы можете вызвать эту функцию в корневом файле точки входа:

import { createApp } from 'vue'
import { disableContextMenu } from 'disable-context-menu';

if (process.env.NODE_ENV !== 'development') {
  disableContextMenu();
}

const app = createApp({
  el: '#app'
})

Угловой:

В приложении Angular вы можете добавить функцию в основной компонент начальной загрузки:

import { Component, OnInit } from '@angular/core';
import { disableContextMenu } from 'disable-context-menu';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class App implements OnInit {
  constructor() {}

  ngOnInit() {
    disableContextMenu();
  }
}

Заключение:

Пакет disable-context-menu — это мощный, но простой инструмент, который поможет вам обеспечить уровень конфиденциальности кода вашего производственного приложения. Отключив контекстное меню, вы можете удержать нетехнических пользователей от случайного изучения исходного кода вашего приложения. Не забывайте использовать этот инструмент разумно, так как некоторые пользователи полагаются на контекстное меню для доступности и других функций.

Спасибо за чтение! Если у вас есть какие-либо вопросы, не стесняйтесь оставлять комментарии ниже.