I'm using SessionStorage data to display the username on the screen. The name should load after login, but the information is only loaded when I refresh the page (clicking on reload).
Does anyone know why?
HTML
<cv-header-name to="/"> Welcome {{ userName }}</cv-header-name>
VUE
data: function () {
return {
userName: [],
};
},
mounted() {
if(sessionStorage.getItem('name')) {
try {
this.userName = JSON.parse(sessionStorage.getItem('name'))
}catch (error) {
sessionStorage.removeItem('name')
}
}
}
Before refresh
enter image description here
After refresh
enter image description here
Related
Good day.
I've been using js-cookie to set cookies in my application, they are set in the exact same way however one of them turns into undefined whenever i use window.location or reload the page. I set 2 cookies, one for a token and one for for the user role in my application but for whatever reason the user role cookie is reset.
Here is how i set it:
login ({dispatch }, payload) {
axios.get('/login',{
auth: {
username: payload.username,
password: payload.password
}
}).then(function (response) {
let in120Minutes = 1/12;
Cookies.set('user_role', response.data['permissions'].user_role, {expires: in120Minutes})
Cookies.set('token', response.data['x-access-token'], {expires: in120Minutes})
window.location.pathname = '/myPage'
}).catch(function (error) {
dispatch('errorHandler', error, { root: true })
})
},
Why does this happen exactly? I do the exact same thing into another application and it works fine.
I am trying to pass a parameter in my Vue.js project, but having no luck. The goal is when I select a user from a list, it should route to that specific user's profile as localhost:61601/Profile/"lastName"
Here is my method when I click next to the users name:
editItem(lastName) {
this.$router.push({ name: 'GetInquiry', params: { lastName: lastName } })
this.$http.get('http://localhost:61601/api/' + 'GetInquiry/' + { lastName : lastName })
},
async GetAllInquiries() {
this.loading = true
try {
this.records = await api.GetAllInquiries()
} finally {
this.loading = false
}
},
As of right now, I am just passing the lastName, but eventually, it will pass a unique id.
Here is the test Profile Page, Here I am just trying to get that users information to display to test the page. So if everything works, the users firstName should display:
<template>
<div class="Profile">
<div class="container">
<div class="row">
<template slot="items" slot-scope="records">
<h1> Student Name: {{ records.items.firstName }}</h1>
</template>
</div>
</div>
<script>
import api from '../../store/api.js'
export default {
data() {
return {
records: {},
}
},
async created() {
this.GetInquiriesByUser()
},
methods: {
async GetInquiriesByUser() {
this.loading = true
try {
this.records = await api.GetInquiriesByUser()
} finally {
this.loading = false
}
},
}
}
</script>
Here is my routes.js
{
path: '/Profile/:lastName',
name: 'GetInquiry',
component: Profile
}
When i open dev tools on chrome, I get
localhost:61601/api/GetInquiry/[object%20Object]
Im using .netcore api for the backend, which gets results as expected, just cannot seem to get it up on my frontend.
If someone can help me and point me to the right direction that would be awesome. Please do let me know if anyone needs more details.
You are passing an object on the vue-resource instead of the value.
Just pass directly the lastname into the route and it should work as fine.
this.$http.get(`http://localhost:61601/api/GetInquiry/${lastName}`);
i use facebook cordova plug-in. i try to get name of user to display on my other html page. but some how this isn't work. i don't ever got to log in to facebook
function Login()
{
facebookConnectPlugin.browserInit();
facebookConnectPlugin.login(["user_birthday","public_profile","email"]);
facebookConnectPlugin.api("/me/?fields=name", ["user_birthday","public_profile","email"],
function (result) {
document.location.href = "./customer.html#"+String(result.name);
/* alerts:
{
"id": "000000123456789",
"email": "myemail#example.com"
}
*/
},
function (error) {
alert("Failed: " + error);
});
}
also if i remove facebookConnectPlugin.browserInit(); and emulate it on android. it go to log in on facebook but after is done the page don't change at all
If I refresh a meteor page that is using a data query in the iron-router setup, the page loads the template but with no data, then shows the loading template, then shows the page with the data. I want to avoid the page flicker that is happening. This is my router code:
this.route('/stories/:_id', function () {
if (!Meteor.user() && !Meteor.loggingIn()) {
Router.go('home');
} else {
var story = Stories.findOne({ _id: this.params._id });
this.render('showStory', { data: story });
}
});
I've also tried this setup and moved the logged in validation to an onBeforeAction.
this.route('showStory', {
path: '/stories/:_id',
data: function () {
return Stories.findOne({ _id: this.params._id });
}
});
When I refresh the page with this setup, I see my 404 page, then the loading template, then the correct template with data.
Try with this.
Router.map(function () {
this.route('showStories', {
path: '/stories/:_id',
waitOn: function(){
return Meteor.subscribe("Stories"); //we make de subscription here
},
data: function(){
if(! Meteor.user()){
this.render('/') //or sign-up template whatever template you want if user its not loged in
}else{
return Stories.findOne({_id: this.params._id});
}
}
});
});
Already Tested and its working
Can someone please provide the correct method to send an email verification upon user creation? This is the important part...
a) I would like the user to have immediate access upon signing up. But if the user has not yet clicked clicked on the verification link within 48 hours, I would like to deny them logging in until they have clicked on the link.
My code so far sends an email verification but the user has continuos access to the application with or without clicking on the verification link (so my code is of course incomplete).
client.js
Template.join.events({
'submit #join-form': function(e,t){
e.preventDefault();
var firstName= t.find('#join-firstName').value,
lastName= t.find('#join-lastName').value,
email = t.find('#join-email').value,
password = t.find('#join-password').value,
username = firstName.substring(0) + '.' + lastName.substring(0),
profile = {
fullname: firstName + ' ' + lastName
};
Accounts.createUser({
email: email,
username: username,
password: password,
userType: // 'reader' or 'publisher'
createdAt: new Date(),
profile: profile
}, function(error) {
if (error) {
alert(error);
} else {
Router.go('home');
}
});
}
});
server.js
Meteor.startup(function () {
process.env.MAIL_URL = 'smtp://postmaster.....';
Accounts.emailTemplates.from = "no-reply#mydomain.com";
Accounts.emailTemplates.sitename = "My SIte Name";
Accounts.emailTemplates.verifyEmail.subject = function(user) {
return 'Please confirm tour Email address' ;
},
Accounts.emailTemplates.verifyEmail.text = function(user, url) {
return 'Click on the link below to verify your address: ' + url;
}
Accounts.config({
sendVerificationEmail: true
});
My attempt have been made through own readings on meteor docs and looking at other code on SO. I am stuck guys. Thanks for the support.
I think the basic idea is to have some validation code eg in Accounts.validateLoginAttempt which you want to check every time before user logs in. What you can do is to store the date&time when user signs up in user.profile.joinDate. If a user tries to login
Check if the email address has been verified or
check if the user is logging within the grace period of 48 hrs
isWithinGracePeriod = function(user) {
** TBD returning true or false.
This can be tricky when you
have multiple instances in
different time-zones.
** }
and
Accounts.validateLoginAttempt(function(attempt){
if (attempt.user && attempt.user.emails && !attempt.user.emails[0].verified ) {
console.log('No verification action received yet.');
return isWithinGracePeriod(attempt.user);
}
return true;
});
Further, here is the HTML/spacebars stuff:
<body>
{{ > start }}
</body>
<template name="start">
{{#if currentUser}}{{>showUserProfile}}{{else}}{{> login}}{{/if}}
</template>
<template name="login">
## Grab username/password here
</template>
If the login template is created, we can try to capture the verification code after the user clicked the verification link. Note that, if no user is logged in, then login will be rendered, so we attach to login via
Template.login.created = function() {
if (Accounts._verifyEmailToken) {
Accounts.verifyEmail(Accounts._verifyEmailToken, function(err) {
if (err != null) {
if (err.message = 'Verify email link expired [403]') {
var message ='Sorry this verification link has expired.';
console.log(message);
alertBox = Blaze.renderWithData(Template.Alert, {message: message}, $("body").get(0));
}
} else {
var message = "Thank you! Your email address has been confirmed.";
console.log(message);
alertBox = Blaze.renderWithData(Template.Alert, {message: message}, $("body").get(0));
}
});
}
};
The verification link is send in "hook" to Accounts.createUser:
Accounts.onCreateUser(function(options, user) {
user.profile = {};
Meteor.setTimeout(function() {
Accounts.sendVerificationEmail(user._id);
}, 2 * 3000);
return user;
});