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

创建一个新文件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

在VueJS中将Laravel Passport“ client_secret”存储在何处

1 个答案: