njwest
Accessing Phoenix Session Cookie within Internal VueJS/ReactJS App
Note: The real question here is probably “how to access window cookies within a JS SPA”, but can’t hurt to ask from this perspective…
So I am serving a VueJS app built to priv/static/ within a Phoenix 1.4 --no-webpack server, and I am serving the VueJS app from its generated index.html (not index.html.eex) via the PageController like so:
defmodule ...PageController do
def index(conn, _params) do
conn
|> put_resp_header("content-type", "text/html; charset=utf-8")
|> Plug.Conn.send_file(200, Application.app_dir(:tips, **"priv/static/index.html"**))
|> halt()
end
I am using UeberAuth + the UeberAuth CAS strategy to authenticate access to index.html where the VueJS app lives. This puts some user information into a neat session cookie available in my window.
In order to interface with my Phoenix backend, I am making internal HTTP requests to API endpoints in my router.ex that return JSON – since I have the cookie in my window, though, I imagine there is a better way to get my user’s info than:
// js
axios.get('/path/to/get_session').then(...)
# ex
def get_session(conn, _params) do
session = fetch_session(conn)
# get user from :plug_session within session and render it to JSON
end
Since I’m using CAS , I’m avoiding writing a JWT layer on top of this as I’m using CAS as a barrier to index.html, not within the JS SPA itself, and I just feel like There’s Got to Be a Better Way ![]()
Any input would be greatly appreciated, thanks for reading!
Most Liked
kokolegorille
I think the usual way to pass data between html and js is to add data attribute to an element. At least if You don’t use the full SPA, Webpack etc.
I don’t understand why You need an index.html, and not an eex template. If You add eex extension, and pass no parameters, it is supposed to be equivalent to a pure html file. If You hide data attributes inside html, it’s easy for javascript to read them.
Popular in Questions
Other popular topics
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #deployment
- #library
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #channels
- #elixirconf
- #exunit
- #discussion
- #code-sync
- #javascript
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixir-ls
- #phoenix_html
- #iex
- #blog-post
- #graphql
- #genstage
- #ai
- #websockets
- #supervisor
- #advent-of-code
- #elixirconf-us
- #distillery
- #processes
- #forms
- #api
- #metaprogramming
- #security
- #performance








