When a user logs in, they usually want to stay logged in. Cookies can help you preserve your session.
In this video we use the js-cookie library to hold on to the user’s id and recreated their session.
Links
Code
In bower.json:
"dependencies": {
//...
"js-cookie": "~2.0.3"
}
In ember-cli-build.js
app.import('bower_components/js-cookie/src/js.cookie.js');
services/session.js
import Ember from 'ember';
export default Ember.Service.extend({
currentUser: null,
store: Ember.inject.service(),
login(user){
this.set("currentUser", user)
Cookies.set('userId', user.id)
},
logout(){
this.set("currentUser", null)
Cookies.remove('userId')
},
initializeFromCookie: function(){
var userId = Cookies.get('userId');
if(!!userId){
var user = this.get('store').find('user', userId)
this.set('currentUser', user)
}
}.on('init')
});
Transcript
In our last episode, we introduced the session service which allows us to login, and then from the login we’re able to get the current user from that session.
However, that session is not persisted, so when you reload, you’re no longer logged in.
We need a way for the browser to keep track of which session we’re in, and we’re going to do that through cookies.
So in a previous project, I’ve used jquery-cookie.
However, that’s no longer maintained and has been superseded by js-cookie. So we’ll use that.
First, we’ll install a js-cookie plug-in via bower.
Then in our ember-cli-build file, or if you’re using an older version of ember-cli, grok file, we’ll import the js-cookie library.
Then, we’ll have to make sure to restart our server.
Now in our session service, we can start using cookies. So we’ll start by in the login doing Cookies.set, and we’ll set the userId cookie to the ID of the user. Then in the logout, we’ll do Cookies.remove, which will as you guess remove the cookie. So when we login it will set the cookie, when we logout it will remove the cookie.
However, having to do cookies doesn’t by itself solve our problem. We’ll also need to use those cookies whenever we’re reloading the page. So that’s why we’ll use the initializeFromCookie method, and we’ll have that method run whenever the session service is initialized. And it’ll be initialized the first time you call current user.
So within this method, we’ll first grab the userId cookie. If that cookie exists, then we’ll find the user from that ID, and we’ll do that with the store. Remember the store we can inject it as a service.
And then finally we’ll set the currentUser to the user that we got from the store.
So let’s try this out. First, we’ll login, then we’ll reload the page, and we’re still logged in. And logging out works and we’re still logged out.
So that’s how we use cookies to persist the session and make it a lot easier for our user.
Of course there’s one big caveat to what we’ve been doing so far, and that that it’s completely insecure. But we’ll be talking about that next week on ways to secure this down.
In the meantime, in the pro-episode we’re going to be talking about how to have pages that only show up to authenticated users. So if you’re not authenticated, it’ll push you to a certain screen, and then pull you back to the screen you were at once you login. I’ll see you then.