menu

Apollo

A community of developers, designers and others who love Apollo and GraphQL. 🚀

Channels
# All channels
view-forward
# General
view-forward
# Apollo Angular
view-forward
# Announcements
view-forward
# Apollo Android
view-forward
# Apollo Client
view-forward
# Apollo iOS
view-forward
# Apollo Link
view-forward
# Apollo Link Rest
view-forward
# Local State
view-forward
# Apollo Studio
view-forward
# Apollo Server
view-forward
# Apollo Tooling
view-forward
# Contributing
view-forward
# Docs
view-forward
# Events
view-forward
# GraphQL Tools
view-forward
# Jobs
view-forward
# Random
view-forward
# React Apollo
view-forward
# Showcase
view-forward
# Subscriptions
view-forward
# Testing
view-forward
# Vue Apollo
view-forward
Team

Different link when user logged in

June 1, 2020 at 2:23am

Different link when user logged in

June 1, 2020 at 2:23am (Edited 4 months ago)
I have an angular web store app. When not logged in I want to use a link without auth headers so users can see products, when logged in I want them to use headers so they have access to account info. If I use a 'Authorisation: bearer: ${token} ' header with empty token I get an error. I have tried to split the link based on if token exists but I can not find examples of how to do this. The other option is to create different links for protected and not protected information. The server returns public information if no auth header or correct header but fails with incorrect auth header.
What is the correct way to go about this. I mostly need some help in what to search for.
This is my most recent attempt at creating a link
const uri = environment.EXTERNAL_GRAPHQL_URL;
export function provideApollo(httpLink: HttpLink) {
const token = sessionStorage.getItem('access_token');
const basic = setContext((operation, context) => ({
headers: {
Accept: 'charset=utf-8'
}
}));
// Get the authentication token from local storage if it exists
const auth = setContext((operation, context) => (
{
headers: {
Authorization: `Bearer ${token}`
}
}));
const noAuth = setContext((operation, context) => (
{
headers: {}
}));
const linkAuth = ApolloLink.from([basic, httpLink.create({ uri })]);
const linkUnAuth = ApolloLink.from([basic, auth, httpLink.create({ uri })])
const link = new ApolloLink().split(
() => token.length === 0,
linkAuth,
linkUnAuth
)
const cache = new InMemoryCache();
return {
link,
cache
}
}
@NgModule({})

June 24, 2020 at 10:42pm
I'm also hitting a similar issue. I haven't been able to solve it or search for it properly myself. If I find anything, I'll drop it here
  • reply
  • like
There's no need for a separate link if all you need is a different set of headers. Just use one ContextLink and conditionally set the headers depending on the existence of the token. The function you pass to setContext will be ran on each request, so once the token is stored in local storage, the correct headers will be set on subsequent requests
  • reply
  • like
feel free to elaborate on your specific issue if that doesn't solve it for you
  • reply
  • like

July 20, 2020 at 3:46pm
feel free to elaborate on your specific issue if that doesn't solve it for you
your comment helped me address my issue! Thank you. For posterity, I set up an IF statement on client side authorization interceptor. If headers: Authorization Bearer is undefined, it sends a "logged out request" with header: Authorization undefined. If headers Auth has a token, then it sends an authenticated request. On my Apollo Server, I have another IF statement in the context that catches the request by type (header !== 'Bearer Undefined'). If there is a token, the IF statement then decodes the token to place a fully hydrated user object into the context for each backend request.
  • reply
  • like
intercept(req: HttpRequest<any>, next: HttpHandler) {
const authToken = this.authService.getToken();
if (authToken === undefined) {
console.log('Logged Out Request');
const loggedOutRequest = req.clone({
headers: req.headers.set('Authorization', 'Bearer ' + undefined)
});
return next.handle(loggedOutRequest);
}
console.log('Logged In Request');
console.log(`Auth Interceptor token: `, authToken);
const authRequest = req.clone({
headers: req.headers.set('Authorization', 'Bearer ' + authToken)
});
return next.handle(authRequest);
}
  • reply
  • like
context: (request) => {
// add the user to the context
const header = request.req ? request.req.headers.authorization : request.connection.context.Authorization;
if (header !== 'Bearer undefined') {
// Get the user token from the headers.
const token = request.req.headers.authorization || '';
// try to retrieve a user with the token
const user = getUser(request, false);
console.log('inside context if', user);
return {
user,
request,
pubsub
};
}
return {
request,
pubsub
}
},
  • reply
  • like