I have a problem with the user object in nuxt authorization.
await this.$auth.loginWith('local', {
data: this.form
}).then((res) => {
this.$auth.setUser(res.data.user)
return response;
});
When I log in and redirect me to the subpage for the logged in. On the subpage, I display the user data that I received when logging in. The problem is that when I refresh the page, the user object becomes empty but the login status remains. What's the problem? I'm getting the user object with $ auth.user.username etc.
Related
I want to know how to keep user logged in all the time, so that when his token about to expire he could refresh it and would not receive 401 status when entering guarded routes and so that his data could be reflected on page whenever he refreshed it.
My assumption is that once App.vue is opened it should fetch data from server, confirming that user is logged and requesting user data, and eventually storing it in Vuex or localStorage.
Hope I am on the right way to solution
fetch('http://localhost:9000/api/refresh',{
method:'POST',
mode:'cors',
body:JSON.stringify({refreshToken :localStorage.getItem('refreshToken')}),
headers:{'Content-Type':'application/json'}
}
).then(res=>{
if(res.status===200){
return res.json()
}
else return
})
.then(({token})=>{localStorage.setItem('token',token)
Store.dispatch('authorize',JSON.parse(localStorage.getItem('user')))
return })
Here is what I'd like to implement in my Quasar 2 / Vue 3 application:
User visits any route.
Upon each route change, a backend call is made to check if the user is still authenticated.
If the user is not authenticated, she shall get redirected to the external URL of the authentication provider.
This is my current approach:
router.beforeEach(() => {
api.get('/api/user/current').then((response) => {
userInfoStore.authenticated = true;
userInfoStore.givenName = response.data.givenName;
userInfoStore.fullName = response.data.fullName;
}).catch(() => {
userInfoStore.authenticated = false;
});
if (!userInfoStore.authenticated) {
redirect('http://localhost:8555/oauth2/authorization/keycloak');
}
});
However the following problems occur:
The app constantly reloads itself.
The call to /api/user/current gives NS_BINDING_ABORTED in the browser console.
The console shows Changed to http://localhost:8555/oauth2/authorization/keycloak but gives this error message.
ChunkLoadError: Loading chunk src_layouts_MainLayout_vue failed.
I'm using Passport-jwt with Express. I'd liket to restrict pages from logged-in user by middle-ware.
For example, I have a page, /dear-not-sign-in-user After a user logged-in, the user can't access the page. So basically I'd like to implement the opposite of passport.authenticate method. How can I detect the user's token is not valid?
router.get(
"/dear-not-sign-in-user",
!passport.authenticate("jwt", { session: false }),
(req, res) => {
console.log('this user is not logged-in yet');
}
);
Above code doesn't work, but you get the idea what I want to do.
i have a case,
i have 2 different account for login, i have profile page,and i can change my name in my profile page, and success, but when i logout and try to login again with different account to see different data in profile page it wasn't Change, it still display data from the previous account, but when I clear it manually the cache, the data it's updated
how to automatically clear cache when user logout ?
this is my logout at auth-data.ts
logoutUser()
{
return this.fireAuth.signOut();
}
logout at home.ts
logoutUser(){
this.authData.logoutUser().then(() => {
this.navCtrl.setRoot(LoginPage);
});
}
I have a web app where users can log in.
After users log in, they are authenticated by using Express and Passport.
The code after successfully authenticating users is as the following.
router.get("/", function(req, res) {
res.render("index", { user: req.user });
});
Now, user's data is stored in user, so if I want to render user's email on the index page, I can do it by user.email. There is no problem so far.
I use React.js as my choice of Javascript library, and the problem arises here.
Let's say that I want to show user's email through React.js on the index page after they logged in, so my code ended up like the following.
var HelloMessage = React.createClass({
render: function() {
return (
<p>
Your current email is {this.props.email}.
</p>
);
}
});
ReactDOM.render(<HelloMessage email={user.email} />, document.getElementById('hello'));
My intention here is that I can retrieve user's email the same way I retrieve on index page without React.js. So, I put user.email as my prop for email, but this clearly didn't work. It ended up returning error message saying Uncaught ReferenceError: user is not defined. Does anyone know how to retrieve data for the email using React.js?