Logging Out

In notebook:
Building Modern Web Apps
Created at:
2016-01-24
Updated:
2016-01-24
Tags:
JavaScript libraries React

It's also a UX question

What are you logging out from? From Github or the app? Since it's Github who's handling the logging in.Add the logout route to the router
  // **** router.js ****
import ...


export default Router.extend({
    ...
    routes: {
        '':'public',
        'repos': 'repos',
        'login': 'login',
        // ++++ 1. add the logout route
        'logout': 'logout',
        'auth/callback?:query': 'authCallback'
    },
    public () { ... },
    repos () { ... },

    login () { ... },

    authCallback (query) { ... },
    
    // ++++ 2. add the logout handler
    logout () {
        // ++++ 3. clear ALL sensitive data
        window.localStorage.clear()
        // ++++ 4. send back to login (root) page
        window.location = '/'
    }   
})
We still have to handle the case where we got the token after the login (through the gatekeeper xhr call). We just have redirect the user:
  // **** router.js ****
import ...


export default Router.extend({
    ...
    routes: { ... },
    public () { ... },
    repos () { ... },

    login () { ... },

    authCallback (query) 
        query = qs.parse(query)
        console.log(query);
        xhr({
            url: 'https;//the-heroku-labelr-service-url' + query.code,
            json: true
        }, (err, req, body) => {
            console.log(body)
            app.me.token = body.token
            // ++++ 1. add the redirect
            this.redirectTo('/respos')
        })
    ,
    
    // ++++ 2. add the logout handler
    logout () { ... }   
})
Make sure that in the layout JSX file the logout link actually points to ​/logout​.

window.location vs this.redirectTo()

when you change window.location the browser will do a page refresh.
this.redirecTo() is equivalent to:
​this.history.navigate('/repos', {replace:true})​​
meaning that this navigation will not be added to the browser histroy