« home
Steun ons

Cookies

There are three different type of cookies that you can make usage of:

  • props
  • body-data-attr
  • not-exposed

Their functionality is automatically, but you need to activate and controll them.

Different types:

props

This cookie will be exposed by this.props.__appProps.cookie

body-data-attr

This cookie will be exposed by this.props.__appProps.bodyattrcookie. However, this cookie is special: it takes care of setting body[data-cookiename="cookievalue"] properties. This is a handy way to let your css manage the style based upon cookies on a server-rendered page!

not-exposed

These cookies will be sent to the server, so you can read them on the server. However, these cookies will not be part of this.props. If you have sensitive cookie-information, you should set them on these cookies, for users could read the server-response and inspect this.props.

Activate the cookies with manifest.json

You need to activate the cookies you want to use inside src/manifest.json, by setting enabled true:

"cookies": {
    "body-data-attr": {
        "enabled": true,
        "onlySsl": true,
        "ttl-sec": 31536000
    },
    "not-exposed": {
        "enabled": false,
        "onlySsl": true,
        "ttl-sec": 31536000
    },
    "props": {
        "enabled": true,
        "onlySsl": true,
        "ttl-sec": 31536000
    }
}

Manage cookies on the server

You can manage cookies on the server. The following methods are available on request (only for the cookies that are enabled):

  • request.getPropsCookie()
  • request.getBodyDataAttrCookie()
  • request.getNotExposedCookie()

These methods will return a cookie-instance with the following members:

Cookie methods

defineProps(reply, props, ttlSec)
getProps() {
setProps(reply, props, ttlSec) {
cookieIsSet() {
deleteProp(reply, key) {
removeCookie(reply) {
changeTtl(reply, ttlSec) {
refreshTtl(reply) {}

Note that some of these methods require you to pass reply, because it needs to store the new state on the client.

Manage cookies on the client

The running App has means to access the cookies as well. All cookies can be accessed like this:

Cookies managed by the client App

const React = require('react'),
    appModule = require('app'),

class MyView extends React.Component {

    componentDidMount() {
        this.app = appModule.getApp();
    }

    handleClick() {
        const propsCookie = this.app.propsCookie,
            bodyDataAttrCookie = this.app.bodyDataAttrCookie,
            notExposedCookie = this.app.notExposedCookie;

        console.log(propsCookie.getProps());
        console.log(bodyDataAttrCookie.getProps());
        console.log(notExposedCookie.getProps());
    }

    render() {
        return (
            <div>
                <button onClick={this.handleClick.bind(this)}>reload view</button>
            </div>
        );
    }
}

module.exports = MyView;

Accessing the App cookies will return a cookie-instance with the following members:

Cookie methods

getProps()
defineProps(props)
setProps(props)
deleteProp(key)
removeCookie()
changeTtl(ms)

Manipulating cookies on the client App will lead your web app to refresh its view and making a server request. This way, your view gets updated with the accurate this.props.

OFFLINE