Develop Reference

React: How do I use async calls to get a FirebaseToken and then use it in an API call?

I have a React app that is making calls to an API. I have a Client component to handle the calls, and the Components can access it like this (this example is in the componentDidMount function of the Home page, where I want to get a list of all this user's items):
componentDidMount() {
let userId= this.context.userId;
var url = "items/getAllMyItems/" + userId;
Client.fetchData(url, data => {
this.setState({items: data});
});
}
The current setup has no security (just for testing purposes) and the Client is defined like this (this is index.js):
function fetchData(fetchPath, cb) {
return fetch(`https://api.url/${fetchPath}`, {accept: "application/json"})
.then(cb);
}
(there are a couple of other functions which check the results etc, but I've left them out for brevity).
Now, my app connects to Firebase for handling authentication. I have A Firebase component which has 3 files:
firebase.js:
import app from 'firebase/app';
import 'firebase/auth';
const config = {
apiKey: /* etc */,
};
class Firebase {
constructor() {
app.initializeApp(config);
this.auth = app.auth();
}
// *** Auth API ***
doSignInWithEmailAndPassword = (email, password) =>
this.auth.signInWithEmailAndPassword(email, password);
doSignOut = () => this.auth.signOut();
}
export default Firebase;
context.js:
import React from 'react';
const FirebaseContext = React.createContext(null);
export const withFirebase = Component => props => (
<FirebaseContext.Consumer>
{firebase => <Component {...props} firebase={firebase} />}
</FirebaseContext.Consumer>
);
export default FirebaseContext;
index.js:
import FirebaseContext, { withFirebase } from './context';
import Firebase from './firebase';
export default Firebase;
export { FirebaseContext, withFirebase };
We're now implementing backend security, and I need to pass the Firebase token to the API when making calls. I can't figure out how to do it properly.
I know I need to call
firebase.auth().currentUser.getIdToken(true).then(function(idToken) {
// API call with Authorization: Bearer `idToken`
}).catch(function(error) {
// Handle error
});
so I figured that Client/index.js would need to change to something like:
import react from 'react';
import { FirebaseContext } from '../Firebase';
function fetchData(fetchPath, cb) {
<FirebaseContext.Consumer>
{firebase => {
firebase.auth().currentUser.getIdToken(true)
.then(function(idToken) {
// API call with Authorization: Bearer `idToken`
return fetch(`https://api.url/${fetchPath}`, {accept: "application/json"})
.then(cb);
}).catch(function(error) {
// Handle error
});
}}
</FirebaseContext.Consumer>
}
but if I do this I get the error "Expected an assignment or function call but instead saw the expression". I realize this is because it's expecting me to return a component, but I don't want to do that as there's nothing to return. I also tried using useContext, and changing fetchData to:
const Client = () => {
const firebase = useContext(FirebaseContext);
firebase.auth().currentUser.getIdToken(true)
.then(function(idToken) {
// API call with Authorization: Bearer `idToken`
fetch(`https://api.url/${fetchPath}`, {accept: "application/json"})
.then(cb);
}).catch(function(error) {
// Handle error
});
}
but I got an error about an Invalid Hook Call.
Can anyone point me in the right direction?

The code you have to get the ID token looks fine to me.
How to pass it to the API depends on what that API expects, but since you mention ```Authorization: Bearer idToken `` that would typically look like this:
fetch(`https://api.url/${fetchPath}`, {
headers: {
'Accept': 'application/json',
'Authorization': 'Bearer ' + idToken
}
})

Vue.prototype is undefined on first load of the page

So, I'm trying to make a request with axios in my main.js file.
I'm using, as shown, vue-router to make this request before each component is loaded. However, I'm not able to get this to work when my webpage is loaded for the first time. I mean, axios request is done after the component is loaded. Then, this is going to fail:
mounted() {
if (Vue.prototype.$user.role == "Owner") {
this.isOwner = true;
this.estancoId = Vue.prototype.$user.estanco;
}
},
It shows me this error on the console log:
[Vue warn]: Error in mounted hook: "TypeError: Cannot read property 'role' of undefined"
found in
---> <Header> at src/components/Header.vue
<App> at src/App.vue
<Root>
I tried to make this request with an async/await, I tried methods mounted(), created(), beforeMount(), beforeCreate() but still it's the same. I'm new to Vue.js, and I am stuck here and don't know what to do.
Edit with the whole files to see the app structure:
main.js
import router from './router'
import Vue from 'vue'
import App from './App.vue'
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import axios from 'axios'
import Vuex from 'vuex'
// Install BootstrapVue
import 'leaflet/dist/leaflet.css';
Vue.use(BootstrapVue)
// Optionally install the BootstrapVue icon components plugin
Vue.use(IconsPlugin)
Vue.use(axios)
Vue.use(Vuex)
Vue.config.productionTip = false
const store = new Vuex.Store({
state: {
user : {}
},
mutations : {
set_user (state,user) {
state.user = user
}
}
})
export default store
/* eslint-disable */
router.beforeEach((to, from, next) => {
if (from.path.indexOf("modificarCatalogo") == -1 && to.path.indexOf("modificarCatalogo") == -1) {
localStorage.removeItem("catalogue");
}
if (localStorage.getItem("token") != null) {
axios
.get(`${process.env.VUE_APP_API_BASE_URL}/user/role`, {
headers: {
Authorization: "Token " + localStorage.getItem("token")
}
})
.then(response => {
store.commit('set_user', response.data);
console.log("First then")
console.log(store.state.user)
}).catch(function (error) {
// handle error case here
console.log(error);
}).then(function () {
// always executed
console.log("Second then")
next();
});
}else{
next();
}
});
/* eslint-enable */
Vue.use(router)
new Vue({
router,
render: h => h(App),
}).$mount('#app')
It has now Vuex because I tried #ellisdod answer but
App.vue
<template>
<div>
<Header />
<router-view />
<Footer />
</div>
</template>
And, in Header.vue, it is where I make the call to, in this case, Vuex $store, but it is the same. I need it to be done everywhere, so I tried to call the method in App.vue but still no results, it returns an empty object now with the solution of Vuex, but just empty, not with user data.
export default {
name: "Header",
data() {
return {
token: localStorage.getItem("token"),
isOwner: "",
estancoId: ""
};
},
mounted() {
console.log("Header log")
if (this.$store.state.user.role == "Owner") {
this.isOwner = true;
this.estancoId = this.$store.state.user.estanco;
}
},
The rest of the components are irrelevant I think

If you use Vuex to store your user data you can prefill the user value with an empty object so it won't throw an error.
const store = new Vuex.Store({
state: {
user : {}
},
mutations : {
set_user (state,user) {
state.user = user
}
},
actions : {
loadUserFromLocal ({commit,state}) {
if (localStorage.getItem("token") === null) return null
return axios
.get(`${process.env.VUE_APP_API_BASE_URL}/user/role`, {
headers: {
Authorization: "Token " + localStorage.getItem("token")
}
})
.then(response => {
commit('set_user', response.data);
console.log("First then")
console.log(state.user)
}).catch(function (error) {
// handle error case here
console.log(error);
})
}
}
})
new Vue({
router,
store,
render: h => h(App),
}).$mount('#app')
Then in your mounted hook of your main App component add:
mounted () {
this.$store.dispatch('loadUserFromLocal')
}
Now in your router rather than making a server request before every route, you just check the store:
if (this.$store.state.user.role) {
// handle logged in user
}

Hi,
Complete Answer based on Question Edit,Comments and Answers :
Problem
Vue-router's beforeEach method will only execute in components that are defined in the routes.
In your case,
beforeEach will not be called in Header component as it is not part of routing. It is a standalone component.
Therefore you cannot access $user inside it.
store.js
import axios from 'axios'
import Vuex from 'vuex'
const store = new Vuex.Store({
state: {
user : {}
},
mutations : {
set_user (state,user) {
state.user = user
}
}
actions : {
loadUserFromLocal ({commit,state}) {
if (localStorage.getItem("token") === null) return null
return axios
.get(`${process.env.VUE_APP_API_BASE_URL}/user/role`, {
headers: {
Authorization: "Token " + localStorage.getItem("token")
}
})
.then(response => {
commit('set_user', response.data);
console.log("First then")
console.log(state.user)
}).catch(function (error) {
// handle error case here
console.log(error);
})
}
}
})
export default store
#ellisdod - thanks.
Now you can use the user variable from store in your component and will be updated when the data is done fetched or will show initial values till that time
Therefore no need for fetching data in router.beforeEach
router.js
// --> all imports
import store from './store' // --> added
// --> all routes to be defined here...
router.beforeEach((to, from, next) => {
// --> other logic for filtering routes
// --> you can use 'store' variable here to get the user data and add
filtering
if (from.path.indexOf("modificarCatalogo") == -1 &&
to.path.indexOf("modificarCatalogo") == -1) {
localStorage.removeItem("catalogue");
}
next();
});
As you know in vue-router, if next is called then navigation is said to be confirmed and the component will be rendered.
Also for more info on using store variable inside router.beforeEach method refer this question
main.js
import router from './router'
import store from './store' // --> added
import Vue from 'vue'
import App from './App.vue'
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import axios from 'axios'
import Vuex from 'vuex'
// Install BootstrapVue
import 'leaflet/dist/leaflet.css';
Vue.use(BootstrapVue)
// Optionally install the BootstrapVue icon components plugin
Vue.use(IconsPlugin)
Vue.use(axios)
Vue.use(Vuex)
Vue.config.productionTip = false
Vue.use(router)
new Vue({
router,
store // --> added
render: h => h(App),
}).$mount('#app')
App.vue
mounted () {
this.$store.dispatch('loadUserFromLocal')
}
#ellisdod - thanks.
Header.vue
export default {
name: "Header",
data() {
return {
token: localStorage.getItem("token")
};
},
computed: {
isOwner() {
return this.$store.state.user.role == "Owner"
}
estancoId () {
return this.$store.state.user.estanco;
}
}
mounted() {
console.log("Header log")
},
}

Importing dependency works in one file, but not the other

I am starting adventure with Vuex, and making some auth module. Found some examples that I am trying to follow, but got stuck trying to use axios in store. My store has separated index, actions, getters etc. files.
Action login works when it's in actions in store/index.js, but when I put it in the store/actions.js file, it says axios is undefined.
store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'
// import example from './module-example'
Vue.use(Vuex)
/*
* If not building with SSR mode, you can
* directly export the Store instantiation
*/
import state from './state'
import getters from './getters'
import mutations from './mutations'
import actions from './actions'
export default function(/* { ssrContext } */) {
const Store = new Vuex.Store({
modules: {
// example
},
namespaced: false,
getters,
mutations,
actions,
state,
// enable strict mode (adds overhead!)
// for dev mode only
strict: process.env.DEV,
})
return Store
}
store/actions.js
export default {
login({ commit }, user){
return new Promise((resolve, reject) => {
commit('auth_request')
axios({ url: 'http://localhost:3000/login', data: user, method: 'POST' })
.then(resp => {
const token = resp.data.token
const user = resp.data.user
localStorage.setItem('token', token)
axios.defaults.headers.common['Authorization'] = token
commit('auth_success', token, user)
resolve(resp)
})
.catch(err => {
commit('auth_error')
localStorage.removeItem('token')
reject(err)
})
})
}
}

import axios from 'axios'
That should be only in actions.js file, because that's where you use it. And yes, you need to import it in every file separately or use globals.

define axios globaly in app entry point(app.js or smth like that):
global.axios = require('axios')

How to access Vuex store from javascript/typescript modules files (import/export)?

I have a vue application.
How to access the store from javascript/typescript modules files (import/export)?
for example, I create auth-module that export state, actions, mutations.
export const auth = {
namespaced: true,
state,
actions,
mutations,
getters,
};
In my app I import the module to my store:
Vue.use(Vuex);
export const store = new Vuex.Store({
modules: {
auth,
}
});
Now, I want to create interceptor (inside my auth-module) for my http calls to add the token from the store.
Vue.http.interceptors.push((request: any) => {
// ---> store.state.token???
// request.headers.set('Authorization', 'Bearer TOKEN');
});
But how can I get access to the state of the store without be depend on my app?
import {store} from './store' but it's okay to import the store instance from vue or vuex module.

You can do that using Plugin.
When you using Plugin, you will get the store instance.
Subscribe to the instance and you get the state, extract token from the state and save it to local variable.
In the Interceptor read this module-global variable.
Here is the solution I built for you:
StoreTokenInterceptorPlugin.ts
import Vue from 'vue';
import VueResource from 'vue-resource';
import { get } from 'lodash';
Vue.use(VueResource);
export const StoreTokenInterceptorPlugin = (store: any) => {
let token: string | null = null;
(Vue.http.interceptors as any).push((request: any) => {
if (token && !request.headers.get('Authorization')) {
request.headers.set('Authorization', `Bearer ${token}`);
}
});
store.subscribe((mutation: any, state: any) => {
token = get(state, 'auth.token') || null;
});
};
in your app store:
import Vue from 'vue';
import Vuex from 'vuex';
import { auth, StoreTokenInterceptorPlugin } from '#modules/auth';
Vue.use(Vuex);
export const store = new Vuex.Store({
state,
modules: {
auth,
} as any,
....
plugins: [StoreTokenInterceptorPlugin],
});

can't access vue resource inside action vuex

hey guys i am trying to do a request inside my action on the vuex side, and i get this error:
Cannot read property '$http' of undefined
i set my vue-resource this way inside my main.js file:
import Vue from 'vue'
import VueResource from 'vue-resource'
import VueRouter from 'vue-router'
import App from './App.vue'
import {routes} from './routes';
import {store} from './store/store';
import VModal from 'vue-js-modal'
Vue.use(VModal)
Vue.use(VueResource);
Vue.use(VueRouter);
const router = new VueRouter({
routes
});
new Vue({
el: '#app',
store,
router,
render: h => h(App)
})
then on the store:
addStyle(state,newStyleObj) {
console.log(newStyleObj);
var vm = this;
this.$http.post('http://localhost:16339/api/Styles/PostStyle/', newStyleObj)
.then(response => {
state.tableStyles = response.body;
console.log(state.tableStyles)
console.log(response.body)
}, error => {
console.log(error);
});
}
any help?

import axios from 'axios'
import Vue from 'vue'
import Vuex from 'vuex'
const axiosInstance = axios.create({
baseURL: '',
withCredentials: true,
})
Vue.prototype.$axios = axiosInstance
Vuex.Store.prototype.$axios = axiosInstance
This works for me.
Now you can access via this.$axios in Vue and Vuex.

You can access Vue instance from the store using this._vm.
this._vm.$http.post()

Here is a proper explanation of the problem that $http is not accessible within vuex https://stackoverflow.com/a/42571288/6355502
The state can only be altered in mutations. NOT in actions. Just commit a mutation from inside of the action to alter the state.
I tried the same last night and got error messages that forced me to do the async fetching in actions which trigger mutations. You cannot do async operations in mutations and you cannot alter the state in actions, so you have to split the code.
// in actions
addStyle ({ commit, state }, newStyleObj) {
console.log(newStyleObj);
var vm = this;
this.$http.post('http://localhost:16339/api/Styles/PostStyle/', newStyleObj)
.then(response => {
commit("setTableStyles", response.body);
console.log(state.tableStyles)
console.log(response.body)
}, error => {
console.log(error);
});
}
// in mutations
setTableStyles(state, payload){
state.tableStyles = payload; // or state.tableStyles.push(...payload) if tableStyles is an Array
}

Outside vue instance (store in this case) use Vue.http (without the dollar sign), inside instance use this.$http.
You can find more on github.

access to axios with Vue.prototype.$http
login({commit}, loginFormData) {
return new Promise((resolve, reject) => {
commit('auth_request');
Vue.prototype.$http({url: '/user/login', data: loginFormData, method: 'POST'})
.then(resp => {
const token = resp.data.data.token;
const user = resp.data.data.profile;
localStorage.setItem('token', token);
localStorage.setItem('user', JSON.stringify(user));
Vue.prototype.$http.defaults.headers['Authorization'] = 'Bearer ' + token;
this.state.user = JSON.parse(localStorage.getItem('user')) || '';
this.state.token = localStorage.getItem('token') || '';
commit('auth_success', {token, user});
resolve(resp)
})
.catch(err => {
commit('auth_error');
localStorage.removeItem('token');
localStorage.removeItem('user');
reject(err)
})
})
},

Try Accessing vue Properties by this way this._vm.$yourDesiredPropertyName
For example this._vm.$http etc
It worked for me .
You can access all the properties which are properly registered to vue instance