Include XSRF token in userprofile request

CONTRIBUTING.md

@@ -60,6 +60,7 @@ below.
  - Jamie Allen
  - Christopher Bennett
  - Mark Dawson
+ - Min RK
 <!-- end-shortlog -->
 
 (All contributors are identifiable with email addresses in the git version

changes.d/1778.fix

@@ -0,0 +1 @@
+Compatibility with JupyterHub 4.1 XSRF changes

src/graphql/graphiql.js

@@ -18,7 +18,8 @@
 // Code related to GraphiQL
 
 import { parse } from 'graphql'
-import { createGraphQLUrls, getCylcHeaders } from '@/graphql/index'
+import { createGraphQLUrls } from '@/graphql/index'
+import { getCylcHeaders } from '@/utils/urls'
 
 // TODO: https://github.com/apollographql/GraphiQL-Subscriptions-Fetcher/issues/16
 //       the functions hasSubscriptionOperation and graphQLFetcher are both from

src/graphql/index.js

@@ -27,7 +27,7 @@ import { WebSocketLink } from '@apollo/client/link/ws'
 import { setContext } from '@apollo/client/link/context'
 import { SubscriptionClient } from 'subscriptions-transport-ws'
 import { store } from '@/store/index'
-import { createUrl } from '@/utils/urls'
+import { createUrl, getCylcHeaders } from '@/utils/urls'
 
 /** @typedef {import('subscriptions-transport-ws').ClientOptions} ClientOptions */
 
@@ -46,21 +46,6 @@ export function createGraphQLUrls () {
   }
 }
 
-/**
- * Get request headers for use with UI Server requests.
- *
- * - Adds X-XSRFToken header for hubless token based auth.
- */
-export function getCylcHeaders () {
-  const xsrfToken = document.cookie.match('\\b_xsrf=([^;]*)\\b')
-  const cylcHeaders = {}
-  if (Array.isArray(xsrfToken) && xsrfToken.length > 0) {
-    // pick the last match
-    cylcHeaders['X-XSRFToken'] = xsrfToken.splice(-1)
-  }
-  return cylcHeaders
-}
-
 /**
  * Create a subscription client.
  *

src/services/user.service.js

@@ -17,15 +17,18 @@
 
 import axios from 'axios'
 import User from '@/model/User.model'
-import { createUrl } from '@/utils/urls'
+import { createUrl, getCylcHeaders } from '@/utils/urls'
 
 class UserService {
   /**
    * Gets the user profile from the backend server.
    * @returns {Promise<*>} - a promise that dispatches Vuex action
    */
   getUserProfile () {
-    return axios.get(createUrl('userprofile')).then(({ data }) => {
+    return axios.get(
+      createUrl('userprofile'),
+      { headers: getCylcHeaders() },
+    ).then(({ data }) => {
       return new User(
         data.name,
         data.groups,

src/utils/urls.js

@@ -72,6 +72,22 @@
   return normalize(url)
 }
 
+/**
+ * Get request headers for use with UI Server requests.
+ *
+ * - Adds X-XSRFToken header cookie-based auth.
+ */
+function getCylcHeaders () {
+  const xsrfToken = document.cookie.match('\\b_xsrf=([^;]*)\\b')
+  const cylcHeaders = {}
+  if (Array.isArray(xsrfToken) && xsrfToken.length > 0) {
+    // pick the last match
+    cylcHeaders['X-XSRFToken'] = xsrfToken.splice(-1)
+  }
+  return cylcHeaders
+}
+
 export {
-  createUrl
+  createUrl,
+  getCylcHeaders,
 }