I have a ReactNative app that is working with some constants,
export const BEARER_TOKEN = 'eyJhbGciOiJIU***'
The app works fine until I need to update the token so with a new version distributed by appcenter,
If I just update the app, it keeps the old token
but
If I delete and install a new version, the new token is used
So, how can I make sure that the new token gets loaded? like if the app starts reload constants?
Thanks.
I suggest using Asyncstorage and Redux state in order to maintain your Bearer_Token.
For instance, assume using the Facebook app.
You are logging in for the very first time. Capture and store your Bearer_token in Asyncstorage and also maintain in the redux state.
Next time when you kill the app and open again. Load the Bearer_Token from Asyncstorage.
Your Bearer_Token will be set dynamically.
You can't, with this approach. This is the nature of javascript, it loads everything initially and even if you change it by putting the variable in object. It is a bad practice.
The better approach is to use redux or context api,
I see you want to use BEARER_TOKEN, for user authentication probably.
So you can have a state, authUser inside your redux and it will keep track of the token in your entire app. This approach is very useful when you want the user to logout if any change in authToken.
https://redux.js.org/
For a simple version, you can use context api from react.
now the third option, If you really really really want to not use these approaches.
You can just usewindow.token = 'sdfasdf';
then whenever you want to change it, just use window.token = 'soemthing else'from other files.
Related
So basically I have a simple vue app that is going to make requests to an API.
As there is no authentication, I need to make sure that during the vue app's life cycle (basically while the browser is open) the app will have access to some unique identifier that can be sent to the server.
In this way, the API will understand that it is the same "user" that is making requests.
As Im totally new to vue Im not really sure how I can accomplish this.
My first idea was to add code inside some global file (for example /src/App.vue) that could look like this:
if(!window.localStorage.getItem('session_id')){
let random = Array(5).fill().map(n=>(Math.random()*36|0).toString(36)).join('')
window.localStorage.setItem('session_id', random)
}
And then, when making API requests, I would attach it this way:
//pseudo code
request.header('session_id', window.localStorage.getItem('session_id')).get('endpoint1')
Is this the way to go? Or there are better ways?
I'm using Nuxt 2.15 with target: "static" and hosting on a shared hosting "hostinger". I fetch the data from an external API using axios and Vuex state management and here comes the problem where the app doesn't load the new data it gets from the API.
How can I make the app rerenders its data and output the newly updated data it gets from fetching the API?
I assume you are using nuxtServerInit or asyncData for getting the data from API. This used with static mode means that data is get only during generation. Which is great for not too often updated content because it doesn't have to connect to server every time it's faster.
Depend on your needs you can:
Get data from API in mounted() hook this will get data from API every time the page is loaded BUT it also means that it could be loaded with some delay and it probably wouldn't be indexed by search engines
You can go with universal mode (https://nuxtjs.org/docs/configuration-glossary/configuration-mode/) and start your site on node.js server which will use up-to-date data from API each time user will open your site.
EDIT: as #kissu corrected me in comment this one is deprecated, please use this one: target:'server' instead of target:'static', which is default so you can just remove this line (https://nuxtjs.org/docs/configuration-glossary/configuration-target/ )
Problem Defination:
I need to inject the authorization header to session storage of WebView, so that the server authenticates the user and redirects to the dashboard. If there is any delay in injection the WebView loads and redirects user to server's login page as it couldn't find the authorization header in the session storage.
What I tried:
onLoadStrat of WebView, I've injected the data using this.webview.injectJavaScript()
By doing so I'm able to inject the data to session storage but on first load there's a race condition. Injection takes a bit time and the Login screen has shown in place of the dashboard.
Expected Result:
We want to achieve the injection without any delay. Suggest me if there's any other way to get this working the way we want it to.
Waiting to hear from you guys. Your valuable suggestions are highly appreciated.
Thank you.
What you are facing is a direct result of asynchronous nature of React in general. You cannot stop the login screen rendering from happening (in other words, the render() function cannot be stopped). But what you can do is, you can inject the data into sessionStorage and then once it is set, change some variable in the state of the component. This will force the component to re-render but this time you will have the data injected. So here are the steps:
1.) Let it render first (you cannot stop it and stopping it anyways is anti-pattern).
2.) Inject the data as you need it to.
3.) Change the state of the component as soon as step 2 is done.
All of this should happen very fast and should not be visible to the end user, imo.
I am developing a front end mobile application with react-native and redux implementation. I had successfully pulled all the necessary real APIs. Now I want to create a function that can update the student's info. Fyi, I'm developing a student information system, so there's info like address and email that need to be updated if changes occur. I don't know how to do it, I heard people uses "lodash" which I dunno what it is for. And how do I save the updated changes?
To update state of redux, it is good idea to use helper like react-addons-update or immutability-helper. update() provides simple syntactic pattern to make writing state update code easier. Eg:
import update from 'immutability-helper';
function handleUpdateMydata(state, action){
return update(state,{
myData:{
$set:action.payload
}
})
}
To ensure your state is permanent store, you may use redux-persist
lodash is a library that is used for dealing with the arrays and objects. if you wanna know more about its content see the documentation here
Documentation
Now coming on to your real problem,since you are using redux I think you should create an action that would update your student details in the database
My app is similar to facebook.
I want to retain the userID/Username upon login screen, so that i could use it at rest of the application for queries online data.
I tried storing it in a javascript object after successful login, but it gets washed away when i move to other screens.
Thanks
You can use the App.Properties API.
Example, right from the docs.
Titanium.App.Properties.setString("my_prop","cool");
if(Ti.Facebook.loggedIn) {
if(Ti.App.Properties.hasProperty('fbid')) {
var fbid = Ti.App.Properties.getString('fbid');
}
}
You can use the hasProperty to verify they have logged in in the past and when they do logout you can use the removeProperty so that your app assumes they haven't logged in and starts over.
If you are going to store the information in the properties, you should be aware that the is information persisted on the device.
The use of properties for short term storage IMHO should be avoided if possible.
You have two choices, one store your variables in the Titanium namespace
Titanium.App.credentials = { "user" :"username", "pwd":"password123"};
Or create your own namespace and store your variable there. This will ensure you values are available throughout the application, but not stored on the device.
There is an example on my blog here http://blog.clearlyinnovative.com/post/6519148138/titanium-appcelerator-quickie-global-variables-scopes