I write following code to authenticate with react but have one problem. after user logged in, set token in local storage and redirect the user to the dashboard and in this page check token from local storage and if not exist redirect the user to the login page and my problem is here!! when come in dashboard page can't get token because return null to me but if refresh the page return token!!
In fact, I'm can't get token after set that.
My codes is:
export const userLogin = (data) => {
return (dispatch) => {
return axios.post(API.USER_LOGIN,data).then((response) => {
dispatch(loginSuccess());
setToken(response.data.token);
dispatch(setUserToken(response.data.token))
}).then(() => {
dispatch(fetchUser());
}).catch((error) => {
dispatch(setFormErrors({errors: error.response.data}));
})
}
};
export const fetchUser = () => {
return (dispatch, getState) => {
dispatch(authLoading(true));
const { userToken } = getState().auth;
return axios.post(API.CURRENT_USER, null, {
headers: { authorization: `Bearer ${userToken}` },
}).then((response) => {
const { id, name, username, email } = response.data.user;
dispatch(setCurrentUser({current_user: { id, name, username, email }}));
dispatch(authLoading(false));
}).catch((error) => {
if(error.response.status) {
dispatch(logout());
}
});
};
};
export const checkToken = () => {
return async (dispatch, getState) => {
const token = await getToken();
const { userToken } = getState().auth;
if (token || userToken) {
dispatch(loginSuccess());
dispatch(fetchUser());
}
};
}
export const setToken = token => localStorage.setItem('token', token);
export const getToken = () => localStorage.getItem('token');
export const clearToken = () => localStorage.removeItem('token');
Related
I have a section on a webpage for a task :
In the form i write an email which is 'validated' later with a function.First when i submit an email which passed the validation it sends a sendSubscribe function to the server,after that i click the button unsubscribe and it sends a unsubscribeUser function.But,after that,when i click on the email input,it starts to send unsubscribe fetch requests everytime and when i click on the subscribe button it also does the same.
The network tab looks like this:
I think i know which is the problem,but i dont know how to fix it.My idea is that everytime i click on the subscribe button it ataches an event listener from the function,thats why it fires multiple unsubscribe requests.
Subscribe functions : the subscribeEmail is the most important
import { validateEmail } from './email-validator.js'
import { unsubscribeUser } from './unsubscribeFetch.js'
export const subscribe = () => {
const subscribeBtn = document.getElementById('subscribeButton')
subscribeBtn.setAttribute('value', 'Unsubscribe')
document.getElementById('emailForm').style.display = 'none'
localStorage.setItem('isSubscribed', 'true')
document.getElementById('submit-info').value = ''
}
export const unsubscribe = () => {
const subscribeBtn = document.getElementById('subscribeButton')
subscribeBtn.setAttribute('value', 'Subscribe')
document.getElementById('emailForm').style.display = 'block'
localStorage.setItem('isSubscribed', 'false')
}
export const subscribeEmail = (email) => {
const isValidEmail = validateEmail(email)
if (isValidEmail === true) {
subscribe()
document.querySelector('form').addEventListener('click', function (e) {
unsubscribe()
unsubscribeUser()
localStorage.removeItem('Email')
e.stopPropagation()
})
} else if (isValidEmail === false) {
unsubscribe()
}
}
Subscribe fetch functions:
import { validateEmail } from './email-validator.js'
export const sendSubscribe = (emailInput) => {
const isValidEmail = validateEmail(emailInput)
if (isValidEmail === true) {
sendData(emailInput)
}
}
export const sendHttpRequest = (method, url, data) => {
return fetch(url, {
method: method,
body: JSON.stringify(data),
headers: data
? {
'Content-Type': 'application/json'
}
: {}
}).then(response => {
if (response.status >= 400) {
return response.json().then(errResData => {
const error = new Error('Something went wrong!')
error.data = errResData
throw error
})
}
return response.json()
})
}
const sendData = (emailInput) => {
sendHttpRequest('POST', 'http://localhost:8080/subscribe', {
email: emailInput
}).then(responseData => {
return responseData
}).catch(err => {
console.log(err, err.data)
window.alert(err.data.error)
})
}
Unsubscribe fetch function:
export const unsubscribeUser = () => {
fetch('http://localhost:8080/unsubscribe', { method: 'POST' }).then(response => { console.log(response.status) })
}
Subscribe button event listener:
document.querySelector('form').addEventListener('submit', async function (e) {
// create a variable to store localStorage email value
const introducedEmail = inputForm.value
e.preventDefault()
console.log(introducedEmail)
localStorage.setItem('Email', introducedEmail)
subscribeEmail(introducedEmail) //change the button style and set in local storage isSubscribed to true
sendSubscribe(introducedEmail) //send subscribe fetch to the server
// prevent additional requests upon clicking on "Subscribe" and "Unsubscribe".
if (isFetching) return // do nothing if request already made
isFetching = true
disableBtn()
const response = await fetchMock() //eslint-disable-line
isFetching = false
enableBtn()
})
// functions for disabling the submit button when a fetch request is in progress
const fetchMock = () => {
return new Promise(resolve => setTimeout(() => resolve('hello'), 2000))
}
const disableBtn = () => {
submitForm.setAttribute('disabled', 'disabled')
submitForm.style.opacity = '0.5'
}
const enableBtn = () => {
submitForm.removeAttribute('disabled')
submitForm.style.opacity = '1'
}
}
Could you guys please help me? I have no idea how to fix this.Thanks in advance!
I modified all your functions and fixed your problem, implemented async and await.
https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous/Async_await
Subscribe fetch functions
import { validateEmail } from './email-validator.js'
export const sendSubscribe = async (emailInput) => {
const isValidEmail = validateEmail(emailInput) // idk if this is async func
if (isValidEmail === true) {
await sendData(emailInput);
}
}
export const sendHttpRequest = async (method, url, data) => {
return await fetch(url, {
method: method,
body: JSON.stringify(data),
headers: data
? {
'Content-Type': 'application/json'
}
: {}
}).then(response => {
if (response.status >= 400) {
return response.json().then(errResData => {
const error = new Error('Something went wrong!')
error.data = errResData
throw error
})
}
return response.json()
})
}
const sendData = async (emailInput) => {
await sendHttpRequest('POST', 'http://localhost:8080/subscribe', {
email: emailInput
}).then(responseData => {
return responseData
}).catch(err => {
console.log(err, err.data)
window.alert(err.data.error)
})
}
Unsubscribe fetch function
export const unsubscribeUser = async () => {
await fetch('http://localhost:8080/unsubscribe', { method: 'POST' }).then(response => { console.log(response.status) })
}
Subscribe button event listener
let isFetching = false;
document.querySelector('form').addEventListener('submit', async function (e) {
e.preventDefault();
if (isFetching) return // do nothing if request already made
// create a variable to store localStorage email value
const introducedEmail = inputForm.value;
console.log(introducedEmail);
localStorage.setItem('Email', introducedEmail);
// prevent additional requests upon clicking on "Subscribe" and "Unsubscribe".
disableBtn();
await fetchMock();
isFetching = true;
await subscribeEmail(introducedEmail); //change the button style and set in local storage isSubscribed to true
await sendSubscribe(introducedEmail); //send subscribe fetch to the server
// data sent, reenabling button
isFetching = true
enableBtn();
});
// functions for disabling the submit button when a fetch request is in progress
...
const fetchMock = () => {
return new Promise(resolve => setTimeout(() => resolve('hello'), 2000))
}
const disableBtn = () => {
submitForm.setAttribute('disabled', 'disabled')
submitForm.style.opacity = '0.5'
}
const enableBtn = () => {
submitForm.removeAttribute('disabled')
submitForm.style.opacity = '1'
}
}
So,like i said,the problem was in the function that attached a new event listener to the button,thats why unsubscribe request was sent everytime with +1 more request. So,i did this way :
Function for the submit button:
let isUsed = false
const submitClickButton = async () => {
// create a variable to store localStorage email value
const introducedEmail = inputForm.value
//e.preventDefault()
console.log(introducedEmail)
localStorage.setItem('Email', introducedEmail)
subscribeEmail(introducedEmail) //change the button style and set in local storage isSubscribed to true
sendSubscribe(introducedEmail) //send subscribe fetch to the server
// prevent additional requests upon clicking on "Subscribe" and "Unsubscribe".
if (isFetching) return // do nothing if request already made
isFetching = true
disableBtn()
const response = await fetchMock() //eslint-disable-line
isFetching = false
enableBtn()
isUsed = true
}
const undoClickButton = () => {
//e.preventDefault()
//unsubscribeEmail()
unsubscribeEmail()
isUsed = false
}
const toggleButton = () => {
isUsed ? undoClickButton() : submitClickButton()
}
submitForm.addEventListener('click', toggleButton, false)
And subscribeEmail function :
export const subscribeEmail = (email) => {
const isValidEmail = validateEmail(email)
if (isValidEmail === true) {
subscribe()
// document.querySelector('form').addEventListener('click', function (e) {
// unsubscribe()
// unsubscribeUser()
// localStorage.removeItem('Email')
// e.stopPropagation()
// })
} else if (isValidEmail === false) {
unsubscribe()
}
}
export const unsubscribeEmail = () => {
// const isValidEmail = validateEmail(email)
// if (isValidEmail===true){
unsubscribe()
unsubscribeUser()
localStorage.removeItem('Email')
//}
}
I'm making a get request to an API in a useEffect(). When I navigate to the page from the homepage it loads fine, but as soon as i refresh the page http://localhost:3000/coins/coin I get a Unhandled Runtime Error: Error: Network Error.
export async function getServerSideProps({ query }) {
const id = query;
return {
props: { data: id },
};
}
function index({ data }) {
const coinURL = data.id; // bitcoin
const apiEndpoint = `https://api.coingecko.com/api/v3/coins/${coinURL}`;
const [currentUser, setCurrentUser] = useState();
const [coinData, setCoinData] = useState([]);
useEffect(() => {
const getData = async () => {
const res = await axios.get(apiEndpoint);
const { data } = res;
setCoinData(data);
};
const getCurrentUser = async () => {
const res = await axios.get(
`http://localhost:5000/api/users/${session?.id}`
);
const { data } = res;
setCurrentUser(data);
};
getData();
getCurrentUser();
}, [coinData, currentUser]);
}
Why does this happen?
I'm recommending to do something like this:
const getData = async () => {
try {
const res = await axios.get(apiEndpoint);
const { data } = res;
setCoinData(data);
} catch(err) {
console.log(err)
}
};
const getCurrentUser = async () => {
try {
const res = await axios.get(
`http://localhost:5000/api/users/${session?.id}`
);
const { data } = res;
setCurrentUser(data);
} catch(err) {
console.log(err)
}
};
useEffect(() => {
getData();
getCurrentUser();
}, [coinData, currentUser]);
if you do so, you will be able to view the exact error and fix it.
Goal
My goal is to call componentDidMount() function to return some values from another method called getUserPlaylists().
Problem
The problem I am encountering is that the componentDidMount() shows me value of undefined and getUserPlaylists() shows me a result of an array.
Actual result
Code
Within Spotify.js file I have the following code:
const clientId = 'Cleint ID Here';
const redirectUri = 'http://localhost:3000/';
let accessToken;
let userId;
const Spotify = {
getAccessToken() {
if (accessToken) {
return accessToken;
}
const accessTokenMatch = window.location.href.match(/access_token=([^&]*)/);
const expiryInMatch = window.location.href.match(/expires_in=([^&]*)/);
if (accessTokenMatch && expiryInMatch) {
accessToken = accessTokenMatch[1];
const expiresIn = Number(expiryInMatch[1]);
window.setTimeout(() => accessToken = '', expiresIn * 10000);
window.history.pushState('Access Token', null, '/');
return accessToken;
} else {
const accessUrl = `https://accounts.spotify.com/authorize?client_id=${clientId}&response_type=token&scope=playlist-modify-public&redirect_uri=${redirectUri}`;
window.location = accessUrl;
}
},
async getUserPlaylists() {
await Spotify.getCurrentUserId().then(userId => {
const accessToken = Spotify.getAccessToken();
const headers = { Authorization: `Bearer ${accessToken}` };
fetch(` https://api.spotify.com/v1/users/${userId}/playlists`, {
headers : headers
})
.then(res => res.json())
.then(res => {
if(!res.items) {
return [];
} else {
console.log(res.items)
return res.items;
}
})
})
},
getCurrentUserId() {
if (userId) {
return new Promise((resolve) => {
resolve(userId);
})
} else {
return new Promise((resolve) => {
const accessToken = Spotify.getAccessToken();
const headers = { Authorization: `Bearer ${accessToken}` };
return fetch("https://api.spotify.com/v1/me", { headers: headers })
.then(res => res.json())
.then(jsonRes => {
userId = jsonRes.id;
resolve(userId);
});
})
}
}
}
export { Spotify };
Summary
I have 3 objects that can be called as methods within my app.js file.
Here is how I call the componentDidMount() within my app.js file:
async componentDidMount() {
const val = await Spotify.getUserPlaylists();
console.log(val)
}
Expected result
The componentDidMount() should return the same value as getUserPlaylists()
Question
I don't understand why componentDidMount() is returning value of undefined?
Cause you're not returning anything from getUserPlaylists
async getUserPlaylists() {
// here return missed
return await Spotify.getCurrentUserId().then(userId => {
const accessToken = Spotify.getAccessToken();
const headers = { Authorization: `Bearer ${accessToken}` };
// here return too
return fetch(` https://api.spotify.com/v1/users/${userId}/playlists`, {
headers : headers
})
.then(res => res.json())
.then(res => {
if(!res.items) {
return [];
} else {
console.log(res.items)
return res.items.map(playlist => ({
playlistId: playlist.id,
playListName: playlist.name
}));
}
})
})
},
You can simply use the below code, which does the same
async getUserPlaylists() {
// here return missed
try {
const userId = await Spotify.getCurrentUserId()
const accessToken = Spotify.getAccessToken();
const headers = { Authorization: `Bearer ${accessToken}` };
// here return too
const result = await fetch(` https://api.spotify.com/v1/users/${userId}/playlists`, { headers })
const res = await result.json()
if(!res.items) return [];
console.log(res.items)
return res.items.map(playlist => ({ playlistId: playlist.id, playListName: playlist.name }));
} catch(err) {
console.log({ err })
}
}
Well, I have an interesting case...
I'm trying to test a Vuex action that uses the Okta SDK to log in a User. Nothing special there. But at the testing level, I'm stuck trying to catch the idea. I mean, I just want to know if the functions have been called, not anything else, here the code:
The service:
const signIn = async ({ username, password }) => {
const response = await authClient.signIn({ username, password })
if (response.status === 'SUCCESS') {
const tokens = await authClient.token.getWithoutPrompt({
responseType: 'id_token',
sessionToken: response.sessionToken
})
authClient.tokenManager.add('idToken', tokens.tokens.idToken)
return response
}
}
The action:
async logIn({ commit }, { username, password }) {
const loginData = await signIn({ username, password })
commit(mutationTypes.setUserData, {
...loginData.user.profile
})
}
The test:
const authClient = {
signIn() {
return new Promise(resolve => resolve())
},
token: {
getWithoutPrompt() {
return new Promise(resolve => resolve())
}
},
tokenManager: {
add() {
return new Promise(resolve => resolve())
}
}
}
jest.mock('authClient', () => authClient)
it('Auth -> actions.signIn', async () => {
const commit = jest.fn()
const username = 'user'
const password = 'pass'
await actions.signIn({ commit }, { username, password })
expect(authClient.signIn).toHaveBeenCalled()
expect(authClient.token.getWithoutPrompt).toHaveBeenCalled()
expect(authClient.tokenManager.add).toHaveBeenCalled()
expect(commit).toHaveBeenCalled()
})
How to preventing unnecessary requests when update the input?
I tried below solution.But in the App file, that search is declared but never used. I tried something like: https://alligator.io/react/live-search-with-axios/.
What is the variable let token in the fileutils.js. Should I assign let token = localStorage.getItem ('token') to this variable;?
App
import search from /.utils
class App extends Component {
constructor (props) {
super(props);
this.state = {
todos: [],
}
}
search = (query) => {
axios({
url: `/api/v1/todos/{query}`,
method: "GET"
})
.then(res => {
this.setState({
todos: res.data
});
})
.catch(error => {
console.log(error);
})
render () {
return (
<input onChange={this.search} />
)
}
}
utils.js
import axios from 'axios';
const makeRequestCreator = () => {
let token;
return (query) => {
// Check if we made a request
if(token){
// Cancel the previous request before making a new request
token.cancel()
}
// Create a new CancelToken
token = axios.CancelToken.source()
try{
const res = axios(query, {cancelToken: cancel.token})
const result = data.data
return result;
} catch(error) {
if(axios.isCancel(error)) {
// Handle if request was cancelled
console.log('Request canceled', error.message);
} else {
// Handle usual errors
console.log('Something went wrong: ', error.message)
}
}
}
}
const search = makeRequestCreator()
export default search;
You can do that with a function that delays executing of your onChange.you can use debounce function from lodash.js
// _.debounce(yourSearch function, delay time);
search(e){
let str = e.target.value;
_.debounce(() => yourFunction, 500);
}