Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Settings is not working. #129

Open
codeperl opened this issue Nov 14, 2022 · 3 comments
Open

Settings is not working. #129

codeperl opened this issue Nov 14, 2022 · 3 comments

Comments

@codeperl
Copy link

Hi @alexusmai, Thanks for writing such a nice piece of software and saving thousand of hours of developers.

To change the settings, I am following README documentation and so I am using this object:

{
    headers: {
        'X-Requested-With': 'XMLHttpRequest',
        Authorization: `Bearer ${window.localStorage.getItem('_token')}`,
    },
    baseUrl: import.meta.env.VITE_APP_LFM_AXIOS_BASE_URL,
    lang: 'en',
}

I use .env and .env.development files to configure baseUrl. in .env and .env.development file, my VITE_APP_LFM_AXIOS_BASE_URL=https://freemarketbackend.com:443/file-manager/

My vue app is in vuejs3 with vite and run using docker. I am using npm run dev. My Vue 3 app is running in a different domain:
https://www.freemarket.com:4431

After docker build is done, I tried to print VITE_APP_LFM_AXIOS_BASE_URL(baseUrl) and it gives me the correct result: https://freemarketbackend.com:443/file-manager/

But when the Vuejs 3 app is running via https://www.freemarket.com:4431/assets, the laravel file manager UI is shown but the request sent to:

https://www.freemarket.com:4431/initialize

The expected request is to run at:
https://freemarketbackend.com:443/file-manager/initialize

In "fm" vuex namespace, this set to: baseUrl=https://freemarketbackend.com:443/file-manager

Can you please help me to figure out if I miss any point?

So far I tried these ways:

  1. <file-manager v-bind:settings="settings"></file-manager>
  2. At main.js I use:
app.use(router)
    .use(store)
    .use(FileManager, {
        store,
        headers: {
            'X-Requested-With': 'XMLHttpRequest',
            Authorization: `Bearer ${window.localStorage.getItem('_token')}`,
        },
        baseUrl: 'https://freemarketbackend.com:443/file-manager',
        lang: 'en',
    })
    .use(useAccordion)
    .use(VueProgressBar, options)
    .mount('#app');

Thanks in advance!

@codeperl
Copy link
Author

Update: from my investigation. For "some causes", http/axios.js returns axios instance with axios.create() but can't set values from .env.development or .env files! I tried with multiple ways:

  1. inside node_modules/laravel-file-manager/.env|.env.development(predefined files), I set values. It doesn't effect baseURL.
  2. To override those pre-defined files, I create app specific .env|.env.development files. This doesn't work too!

Only way to make it work is to set something like this inside http/axios.js:

import axios from 'axios';

// set new axios instance
export default axios.create(**{
    baseURL: import.meta.env.VITE_APP_LFM_AXIOS_BASE_URL
}**);

All other things ie. inside vuex the baseURL are set correctly. As I stated in last comment. Only this seems the issue. May be there is better way to solve this. But here are my 2 cents.

Regards

@codeperl
Copy link
Author

codeperl commented Nov 17, 2022

Today, I find a solution. I just forked this library and for temporary fix I followed this path:

  1. Saving the settings in localstorage with encryption.
  2. Set the baseURL and headers of axios by decrypting the saved localstorage value.

Seems it is working fine.

Currently facing CORS issue. But I think it's a different case.

@iamsubingyawali
Copy link

iamsubingyawali commented Jan 13, 2023

@alexusmai Same issue. Settings are not getting applied. Why can't I just put hardcoded values and pass it to the settings props? Below code didn't work for me.

<template>
    <div>
        <file-manager v-bind:settings="settings"></file-manager>
    </div>
</template>
<script>
export default {
    computed: {
        settings(){
            return {
                headers: {
                    Authorization: 'Bearer MyToken',
                },
                baseUrl: '/api/file-manager/',
            }
        }
    }
}
</script>

It is neither setting the headers nor using the specified baseURL. When I tried to create a directory with these settings, it is sending requests to http://127.0.0.1:8000/create-directory without specified headers, while it should have sent to https://127.0.0.1:8000/api/file-manager/create-directory with auth header. What am I missing here?

I tried creating environment variable for URL as well, but it too didn't work.

I don't think that using local storage or modifying package config code is a good idea as they can be very unreliable and temporary.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants