Где хранить паспорт Laravel "client_secret" в VueJS

Question

Я немного новичок в VueJS и использую Laravel только в качестве API и VueJS в качестве отдельного проекта.

В моем App.vue у меня есть следующие настройки:

http://api.com - мой виртуальный хост!

<script>
import axios from 'axios';
export default {
  data () {
    return {
    }
  },
  created() {
    const postData = {
      grant_type: "password",
      client_id: 2,
      client_secret: 'MvEyvm3MMr0VJ5BlrJyzoKzsjmrVpAXp9FxJHsau',
      username: 'mail@gmail.com',
      password: '**********',
      scope: ''
    }
    axios.post('http://api.com/oauth/token', postData)
    .then(response => {
      const header = {
        'Accept': 'application/json',
        'Authorization': 'Bearer ' + response.data.access_token,
      };
      axios.get('http://api.com/api/user', { headers: header })
      .then(response => {
        console.log(response.data)
      })
    })
  }
}
</script>

Но этот файл полностью виден внешнему интерфейсу, что плохо из-за безопасностипричины.

Что я сделал, я сделал новый маршрут в Laravel как Route::post('get_client_creds', MyController@index);, а затем сделал запрос от axios как:

axios.post('http://api.com/get_client_creds')
    .then(response => {
        this.client_secret = response.client_secret;
});

И затем я подумал, что любой можеттакже получить доступ к маршруту с помощью Postman или через консоль с помощью axois, поэтому кто-то может дать мне несколько советов о том, где хранить эти секреты ???Заранее спасибо!

Answer 1

Существует два разных способа задания настроек конфигурации для vue

# 1 Vue.js non-cli проектов, вы можете использовать src/config.js

1. Создайте новый файл src/config.js и добавьте следующее

  export const API_CLIENT_ID = '123654';

Чтобы использовать это, попробуйте выполнить импорт следующим образом:

import { API_CLIENT_ID } from '../config'


// in your code
console.log(API_CLIENT_ID);

---

# 2 Для проектов Vue CLi выполните следующие действия.

Вы должны использовать .env файлы, содержащие переменные конфигурации.

Это может быть структурировано как

.env                # loaded in all cases
.env.local          # loaded in all cases, ignored by git
.env.[mode]         # only loaded in specified mode
.env.[mode].local   # only loaded in specified mode, ignored by git

Вот как вы можете указать переменную.

FOO=bar
API_CLIENT_ID=123456

И вы можете использовать это как:

console.log(process.env.API_CLIENT_ID)

Пожалуйста, следуйте документации для получения более подробной информации.

https://cli.vuejs.org/guide/mode-and-env.html#environment-variables