In my scenaria, I wanna passed 'token' to home view from login view through navigator and it works.
Unfortunately, when I exit login and navigate to login view, the params which once be passed to root navigator cannot be cleared or replaced.I had tried resetTo, but it not works.
So if I switch user, the token will not be changed in root navigator.
Of course, if I use push or initialize a new navigator, it will change 'token'.but I don't wanna do that. because, first, I'm not sure if I initialize a navigator, whether the old one was destroyed, if not ,it will waste memory, in my opinion.second, I don't wanna do extra useless works(if params can be changed in root navigator,the child can retrieve params from it without pass again)
so anyone could resolve it ? thanks in advance
Resolved by myself
Not directly, but use build-in solution from navigator.
In initialRoute, I passed token to it , and in renderScene taken route.token for specified component.
After I logout from index page to login page, I passed token to push method , and then the token which in Navigator tag was changed, and certainly it was passed to Index page.
So my new value is passed successfully,hope helps somebody~
Related
I am currently implementing authentication flow into my react-native app. I have an AppNavigator(bottom-tabs-navigator) and an AuthNavigator (stack-navigator). In my App.js I have a navigationContainer, and I check to see if a user currently exists, based on if an auth token is stored in the phone. I then render the proper navigator depending on if there is a token or not.
<NavigationContainer ref={navigationRef} theme={MyTheme}>
{!user ? (
<AuthNavigator />
) : (
<AppTabNavigator />
)}
</NavigationContainer>
When the user signs out I simply remove the token and set the user variable to null.
const signout = () => {
authStorage.removeToken();
setUser(null);
};
This is all working fine, the user is able to sign in and out, and the proper navigator is rendered. However, the problem is that if the user signs out, and then signs back in (either as the same user or a different one), the first tab/screen they see is the last screen in my TabNavigator.
I have 5 tabs in my navigator and the user should be on the first tab when they sign in, but instead they are taken to the 5th tab. Even if I pass the "initialRouteName" prop to the navigator, it still goes directly to the 5th screen. This behavior does not occur the first time a user signs in however. It only occurs after signing out and then signing back in. This makes me believe that somehow the state of the navigator is persisting after the user signs out. The 5th tab is the profile tab and that is where the user signs out. So the 5th tab would be the last one visited before the user signs out. Thank you to anyone who can help!
If anyone else comes across this problem, I think I found a good solution, at least for the time being. In the logout function, as suggested by D10S, I reset the navigation state before I setUser(null). And I actually removed the setUser() from the logout function entirely and added it in a useEffect cleanup for the screen component. So whenever the screen unmounts, the cleanup function checks to see if there is an auth token present. If there is no token, then the user is set to "null". Since logging out results in the token being removed, the user is then properly set. This solution seems to be working fine with expected behavior and no react-warnings.
On the "logout" function, right before you call "signout" try to reset the navigator state.
You can see more about reseting the navigator state here.
I am using $router.go(-1) to go back to the previous page but as I am using this on a home page I want know how to check if there is a previous route.
Vue router navigation is tracked by the native browser history, use window.history.length.
If it is 0 there is nothing to go back to.
However; Users arriving from another website have a value higher than 0.
To overcome this issue, upon your App mounting; store the initial value of window.history.length globally.
Capture the initial value using a mount hook such as: beforeMount or mounted.
Store the history length value using $root as a global state:
this.$root.historyCount = structuredclone(window.history.length)
Alternatively use VueX if you are already leveraging the store bus plugin.
structuredclone or lodash.clone ensures you have a copy of the value rather than a reference to it, a reference would be bad; as this means you would always have the latest history count rather then the original entry point value.
https://developer.mozilla.org/en-US/docs/Web/API/structuredClone
https://lodash.com/docs/4.17.15#clone
When checking history state on a call to action, subtract $root.historyCount from window.history.length to see if zeroes out.
This way you will be only counting the history that occurs in your own app.
You may also want to consider that perhaps if your current route ($router.currentRoute) is the home page there is also no way of going back beyond that page but obviously will prevent back navigation to prior home revisits.
As window.history.length will always return 1.
You can use
if (window.history.state.back === null) {
router.push({path="/"}); //or whichever path you required
} else {
router.back();
}
Problem
I have an electron app with vue. As the user has no UI to navigate back I created a back button.
This works so far so good. But being logged in and on the index page the user shouldn't be able to navigate back any more. As he would navigate back to the login but would get redirected back to the index page. And this wouldn't make much sense. For that I want to disable the back button.
Tested
I have added a global variable to get the previous route in my components. But somehow this gets messed up when clicking twice or more often. It looks like that:
router.beforeEach((to, from, next) => {
Vue.prototype.$prevRoute = from;
return next();
});
I think it is because when navigating back the previous route changed to the route you were coming from. And not the history anymore.
There seems to be a github feature request to add the referrer but it was opened in 2016 and I am not sure if it will be again the same problem as above.
https://github.com/vuejs/vue-router/issues/883
In-component guards
I also tested beforeRouteLeave and beforeRouteUpdate but as the back-button is in my layout these methods are not called.
Application-design
I am having a login-page with authentication. After that the user-information is stored in the local-storage and I am using a middleware concept for redirecting (https://markus.oberlehner.net/blog/implementing-a-simple-middleware-with-vue-router/)
To go back I am using this method: this.$router.back()
Expectation
My expected result would be to be able to check in the back-button-component if the back-route will be the login or if there the going-back-stack has only one value left. In that case I would disable my back-button.
I am new to react native and I a have been working on a project at now stuck at a point need help
Actually I want to call a function (_profiledata()) where ever I navigate to profile page. Basically what I am doing is calling the function in componentDidMount but it is only called once
I tried using componentWillUpdate but it keep on running as I set state in the profiledata function.
The code is given bellow
componentDidMount()
{
this._profiledata();
console.log('fordata')
}
I would suggest an work around ,
Use this
this._profiledata()
On the onPress function of the profile page , example if the profile page is situated on settings page. Use the onPress function to data when user presses on profile menu under settings page !
And use a activity indicator of show to users , when data is being loaded and fetched ! Once done show the content !
Hope the suggestion helps !
I want to make a desktop app in vue-electron. I am new to both vue.js and electron.
I am having some problems while managing state.
When I click on login button https://cloudup.com/cFl9MTY6cnn I send data i.e sessionId and username to next screen https://cloudup.com/c76fmL8OGbF and on this screen I display these props https://cloudup.com/csahnc6Z04J using this code https://cloudup.com/cdR0F6Qyt-3 but as I go to the third screen https://cloudup.com/c0F1ztX8qu3 and then come back then this data disappears https://cloudup.com/cTFW32DxeRa
I am going back to second screen using router.go(-1) https://cloudup.com/cvpxk4GsIRx
The vue-router documentation https://router.vuejs.org/en/essentials/navigation.html says that
“router.push method pushes a new entry into the history stack, so when the user clicks the browser back button they will be taken to the previous URL.”
and router.go(n) "This method takes a single integer as parameter that indicates by how many steps to go forwards or go backwards in the history stack"
However in my case, lifecycle hooks are called again when I go back to history stack. So does that mean when we come to previous page that component is created again and not popped from stack. I actually don’t want to refresh / reload the page on back button.
You need to send the data to the third screen,too.
Instead of
<route-link to="third_screen"></router-link>
You need to write,
<router-link :to="{ path: 'third_screen', params: { session_id: this.session_id, userName:this.user_name}}">User</router-link>
And instead of router.go(-1) you need to send the data as params again to your second screen using router.push() method.
But I won't suggest the above method as you need to pass the same data as params to all routes.
You should also have a look at Vuex.
Vuex is a state management pattern + library for Vue.js applications. It serves as a centralized store for all the components in an application, with rules ensuring that the state can only be mutated in a predictable fashion.
You should store your Session Id as cookie instead of passing it as props.
Update
Also have a look at <keep-alive></keep-alive>.
Reference