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.