How to keep backend session information in Polymer SPA -


i'd login restful back-end server written in laravel5, single page front-end application leveraging polymer's custom element.

in system, persistence(crud) layer lives in server. so, authentication should done @ server in responding client's api request. when request valid, server returns user object in json format including user's role access control in client.

here, my questions how can keep session, when user refreshes front-end page? thanks.

this issue beyond polymer, or single page apps. question how keep session information in browser. spas bit easier, since can keep authentication tokens in memory, traditional web apps have had issue since beginning.

you have 2 things need do:

  1. tokens: need user token indicates user authenticated. want cannot guessed, else can spoof it. token better not "jimsmith" more reliable. have 2 choices. either can have randomly generated token server stores, when presented on future requests, can validate token. how session managers work in app servers nodejs sessions or jetty session or etc. alternative cryptographic server needs validate mathematically, not check in store see if token valid. did node in http://github.com/deitch/cansecurity there various options it.
  2. storage: need way store tokens client-side not depend on js memory, since expect reload page.

there several ways client-side storage. common far cookies. since browser stores them without trying hard, , presents them whenever access domain cookie registered for, pretty easy do. many client-side , server-side auth libraries built around them.

an alternative html5 local storage. depending on target browsers , support, can consider using it.

there ways can play url parameters, run risk of losing when switches pages. can work, tend avoid that.

i have not seen components handle cookies directly, shouldn't hard build one.

here gist cookie management code use recent app. feel free wrap build web component cookie management.. long share alike!

https://gist.github.com/deitch/dea1a3a752d54dc0d00a

update:

component.kitchen has storage component here http://component.kitchen/components/tylergarlick/core-resource-storage


Comments

Post a Comment

Popular posts from this blog

javascript - AngularJS custom datepicker directive -

i make custom datepicker directive custom template. but have no idea how start building it... how include date data directive? i appreciate guide or give me advice work on more precisely. it might you! follow below steps html code sample: <label>birth date</label> <input type="text" ng-model="birthdate" date-options="dateoptions" custom-datepicker/> <hr/> <pre>birthdate = {{birthdate}}</pre> <script type="text/ng-template" id="custom-datepicker.html"> <div class="enhanced-datepicker"> <div class="proxied-field-wrap"> <input type="text" ui-date-format="yy-mm-dd" ng-model="ngmodel" ui-date="dateoptions"/> </div> <label> <button class="btn" type="button"><i class="icon-calendar"></i>
Read more

javascript - jQuery date picker - Disable dates after the selection from the first date picker -

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jquery ui datepicker - default functionality</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <link rel="stylesheet" href="/resources/demos/style.css"> <script> $(function () { $("#datepicker1").datepicker(); }); </script> <script> $(function () { $("#datepicker2").datepicker(); }); </script> </head> <body> <p>date 1: <input type="text" id="datepicker1"></p> <p>date 2: <input type="t
Read more