身份验证

如果加载的数据并非全部公开，或者您的应用有用户、账户和权限系统，那么您需要一种方式来告诉服务器每个请求关联的用户。

Apollo 客户端使用超级灵活的Apollo Link，它包括多种认证选项。

如果您的应用基于浏览器，并且您使用 cookie 与后端进行登录和会话管理，将 cookie 随每个请求发送给网络接口。例如，传递 credentials 选项：credentials: 'same-origin' 如果您的后端服务器与下面一样位于同一域名，否则credentials: 'include' 如果您的后端位于不同域名。

1
const link = createHttpLink({
2
  uri: '/graphql',
3
  credentials: 'same-origin'
4
});
5

6
const client = new ApolloClient({
7
  cache: new InMemoryCache(),
8
  link,
9
});

此选项传递给HttpLink在发送查询时使用的fetch实现。

注意：后端还必须允许从请求源中获取凭据。例如，如果在使用流行的npm中'req'包的node.js，以下设置将与上述Apollo客户端设置协同工作：

1
// enable cors
2
var corsOptions = {
3
  origin: '<insert uri of front-end domain>',
4
  credentials: true // <-- REQUIRED backend setting
5
};
6
app.use(cors(corsOptions));

使用HTTP进行身份验证的另一种常见方式是发送授权头发送。通过链式使用Apollo Links向每个HTTP请求添加一个authorization头部。在本示例中，我们将每次发送请求时从localStorage中提取登录令牌：

ReactJS示例

1
import { ApolloClient, createHttpLink, InMemoryCache } from '@apollo/client';
2
import { setContext } from '@apollo/client/link/context';
3

4
const httpLink = createHttpLink({
5
  uri: '/graphql',
6
});
7

8
const authLink = setContext((_, { headers }) => {
9
  // get the authentication token from local storage if it exists
10
  const token = localStorage.getItem('token');
11
  // return the headers to the context so httpLink can read them
12
  return {
13
    headers: {
14
      ...headers,
15
      authorization: token ? `Bearer ${token}` : "",
16
    }
17
  }
18
});
19

20
const client = new ApolloClient({
21
  link: authLink.concat(httpLink),
22
  cache: new InMemoryCache()
23
});

VueJS示例

1
import ApolloClient from "apollo-client";
2
import { HttpLink } from "apollo-link-http";
3
import { ApolloLink, concat } from "apollo-link";
4
import { InMemoryCache } from "apollo-cache-inmemory";
5
import { getMainDefinition } from "apollo-utilities";
6

7
const httpLink = new HttpLink({ uri: process.env.VUE_APP_API_TARGET });
8

9
const authMiddleware = new ApolloLink((operation, forward) => {
10
  // add the authorization to the headers
11
const token = localStorage.getItem('token');
12
  operation.setContext({
13
    headers: {
14
      authorization: token ? `Bearer ${token}` : "",
15
    },
16
  });
17
  return forward(operation);
18
});
19
export const apolloClient = new ApolloClient({
20
  link: concat(authMiddleware, httpLink),
21
  cache: new InMemoryCache(),
22
});

服务器可以使用该头部来验证用户并将其附加到GraphQL执行上下文，这样解析器就可以根据用户的角色和权限修改其行为。

退出时重置存储

由于Apollo缓存了您的所有查询结果，当登录状态改变时删除这些结果是很重要的。

最简单的方法确保UI和存储状态反映当前用户权限，是在您的登录或登出过程完成后调用client.resetStore()。这将导致存储被清除并所有活动查询将被重新取回。如果您只想清除存储而不想重新取回活动查询，则使用client.clearStore()。另一个选项是刷新页面，这将产生类似的效果。

1
const PROFILE_QUERY = gql`
2
  query CurrentUserForLayout {
3
    currentUser {
4
      login
5
      avatar_url
6
    }
7
  }
8
`;
9

10
function Profile() {
11
  const { client, loading, data: { currentUser } } = useQuery(
12
    PROFILE_QUERY,
13
    { fetchPolicy: "network-only" }
14
  );
15

16
  if (loading) {
17
    return <p className="navbar-text navbar-right">Loading...</p>;
18
  }
19

20
  if (currentUser) {
21
    return (
22
      <span>
23
        <p className="navbar-text navbar-right">
24
          {currentUser.login}
25
          &nbsp;
26
          <button
27
            onClick={() => {
28
              // call your auth logout code then reset store
29
              App.logout().then(() => client.resetStore());
30
            }}
31
          >
32
            Log out
33
          </button>
34
        </p>
35
      </span>
36
    );
37
  }
38

39
  return (
40
    <p className="navbar-text navbar-right">
41
      <a href="/login/github">Log in with GitHub</a>
42
    </p>
43
  );
44
}

高级HTTP网络

迁移到Apollo Client 3.0

身份验证

Cookie

Header

退出时重置存储