Refresh Vue module when router is pushed

Question

Refresh Vue module when router is pushed

Hello everyone! I'm new to Vue.js and have encountered an issue with my api module. The code looks like this:

axios.create({
  baseURL: URL,
  headers: {
    Authorization: 'Bearer ${localStorage.getItem('token')}'
  }
})

When on the login page without a token, the module is already loaded as it's used for the login request. After a successful login, I update the token using

localStorage.setItem('token', token)

. However, the api module doesn't reflect this change until I manually refresh the browser page, causing my requests to have a null token until then.

How can this issue be resolved?

Initially, I considered forcing a page reload after login by switching from this.$router.push('/') to this.$router.go('/'), but this broke the navigation to the index page.

I would greatly appreciate any suggestions or solutions. Thank you.

javascript vue.js

Answer 1

Answer №1

If you're looking for a way to manage your API service with axios in Vue.js, one approach is to wrap it in a plugin. Here's an example implementation:

Make sure to explicitly set the token in your axios instance each time you initialize it.

ApiService.js

const axios = require('axios');

// Function to create an axios instance.
const axiosFactory = (options) => axios.create({
    ...options,
    headers: {
        Authorization: `Bearer ${localStorage.getItem('token')}`,
    }
});

// To set the token in axios and save it in localStorage
const setTokenFactory = (axios) => (token) => {
    localStorage.item('token', token);
    axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;
}

// Vue plugin to set $api to axios and expose a setToken function in Vue.
const install = (Vue, axios) => {
    Vue.mixin({
        setToken: (token) => {
            setTokenFactory(Vue.protoype.$api)(token);
        }
    });
    Vue.prototype.$api = axios;
}

// Create an axios instance
const api = axiosFactory({
    baseURL: /* URL */
});
const setToken = setTokenFactory(api);
module.exports = {
    api,
    setToken,
    plugin: {
        install
    }
};

In your main.js

const ApiService = require('./ApiService');
Vue.use(ApiService.plugin, ApiService.api);

To utilize the api outside of Vue, simply import it like this:

const { api, setToken } = require('./ApiService');

api.get();
setToken(token);

When working within Vue, access axios using this.$api. To set the token upon user login, rely on the setToken function such as this.setToken(token)

Answer 2

If you're looking for a way to manage your API service with axios in Vue.js, one approach is to wrap it in a plugin. Here's an example implementation:

Make sure to explicitly set the token in your axios instance each time you initialize it.

ApiService.js

const axios = require('axios');

// Function to create an axios instance.
const axiosFactory = (options) => axios.create({
    ...options,
    headers: {
        Authorization: `Bearer ${localStorage.getItem('token')}`,
    }
});

// To set the token in axios and save it in localStorage
const setTokenFactory = (axios) => (token) => {
    localStorage.item('token', token);
    axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;
}

// Vue plugin to set $api to axios and expose a setToken function in Vue.
const install = (Vue, axios) => {
    Vue.mixin({
        setToken: (token) => {
            setTokenFactory(Vue.protoype.$api)(token);
        }
    });
    Vue.prototype.$api = axios;
}

// Create an axios instance
const api = axiosFactory({
    baseURL: /* URL */
});
const setToken = setTokenFactory(api);
module.exports = {
    api,
    setToken,
    plugin: {
        install
    }
};

In your main.js

const ApiService = require('./ApiService');
Vue.use(ApiService.plugin, ApiService.api);

To utilize the api outside of Vue, simply import it like this:

const { api, setToken } = require('./ApiService');

api.get();
setToken(token);

When working within Vue, access axios using this.$api. To set the token upon user login, rely on the setToken function such as this.setToken(token)

Answer 3

Answer №2

Upon logging in, users have the option to manually set their token. They can choose to retrieve the token from the login response and set it themselves, or request the token from a different API call.

Answer 4

Upon logging in, users have the option to manually set their token. They can choose to retrieve the token from the login response and set it themselves, or request the token from a different API call.

Refresh Vue module when router is pushed

Answer №1

Answer №2

Similar questions

Troubleshooting 404 errors on Firebase hosting with dynamic routes

jQuery radio button for mobile devices

use element ui tree and vue to filter files according to selected folder

The password prompt window refuses to align with the center of the screen. This

Is the absolute positioned element on the left or right based on its current location?

Tips for implementing draggable elements using JavaScript and React hooks, creating a more interactive user experience

The Datalabels in Sunburst Highchart are being concealed outside of the svg container

Retrieve the most recent information based on the ID from an object by utilizing timestamps within Angular 6

Tips for creating a concise switch statement in JavaScript, incorporating both the use of Express and Mongoose

What is the best way to change JSON into a string format?

Eliminate all blank spaces at the top and bottom of Span by squishing it

How to utilize Javascript to open a new view in ASP.NET MVC

What is the process for adding submitted data to an already-existing local JSON file?

Ways to determine if an array with a mix of data types includes string values

The plus sign ('+') fails to be matched by the regular expression in Angular 2, although it functions correctly in other testing environments

Error: the search variable is not defined

Tips for incorporating conditional statements within return statements in functional components in React JS

When it comes to using the text() function, the statement encounters difficulty

How to troubleshoot Path Intellisense in VScode when using jsconfig.json for Next.js

Iterating through an object results in a false outcome