在 VueJS 中存储 Laravel Passport“client_secret”的位置

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指定配置设置有两种不同的方式

#1Vue.js非cli项目，可以使用src/config.js

1. 新建文件src/config.js并添加如下

  export const API_CLIENT_ID = '123654';

1. 要使用它，请尝试如下导入：

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