javascript - vue-apollo 3.0.0 测试版配置
问题描述
在这方面很新,所以非常感谢任何帮助。我知道如何使用 Apollo 客户端进行身份验证,但是当我将新的 vue-apollo-plugin ( https://www.npmjs.com/package/vue-apollo ) 添加到我的 Vue-cli-3 生成项目时。我不明白如何以及在哪里配置我的 authMiddleware。
这是cli自动生成的文件:
import Vue from 'vue'
import VueApollo from 'vue-apollo'
import { createApolloClient, restartWebsockets } from 'vue-cli-plugin-apollo/graphql-client'
// Install the vue plugin
Vue.use(VueApollo)
// Name of the localStorage item
const AUTH_TOKEN = 'apollo-token'
// Config
const defaultOptions = {
httpEndpoint: process.env.VUE_APP_GRAPHQL_HTTP || 'http://localhost:4000', // Use `null` to disable subscriptions
wsEndpoint: process.env.VUE_APP_GRAPHQL_WS || 'ws://localhost:4000',
// LocalStorage token
tokenName: AUTH_TOKEN,
// Enable Automatic Query persisting with Apollo Engine
persisting: false,
// Use websockets for everything (no HTTP)
// You need to pass a `wsEndpoint` for this to work
websocketsOnly: false,
// Is being rendered on the server?
ssr: false,
// Additional ApolloClient options
// apollo: { ... }
// Client local data (see apollo-link-state)
// clientState: { resolvers: { ... }, defaults: { ... } }
}
// Call this in the Vue app file
export function createProvider (options = {}) {
// Create apollo client
const { apolloClient, wsClient } = createApolloClient({
...defaultOptions,
...options,
})
apolloClient.wsClient = wsClient
// Create vue apollo provider
const apolloProvider = new VueApollo({
defaultClient: apolloClient,
defaultOptions: {
$query: {
// fetchPolicy: 'cache-and-network',
},
},
errorHandler (error) {
// eslint-disable-next-line no-console
console.log('%cError', 'background: red; color: white; padding: 2px 4px; border-radius: 3px; font-weight: bold;', error.message)
},
})
return apolloProvider
}
// Manually call this when user log in
export async function onLogin (apolloClient, token) {
localStorage.setItem(AUTH_TOKEN, token)
if (apolloClient.wsClient) restartWebsockets(apolloClient.wsClient)
try {
await apolloClient.resetStore()
} catch (e) {
// eslint-disable-next-line no-console
console.log('%cError on cache reset (login)', 'color: orange;', e.message)
}
}
// Manually call this when user log out
export async function onLogout (apolloClient) {
localStorage.removeItem(AUTH_TOKEN)
if (apolloClient.wsClient) restartWebsockets(apolloClient.wsClient)
try {
await apolloClient.resetStore()
} catch (e) {
// eslint-disable-next-line no-console
console.log('%cError on cache reset (logout)', 'color: orange;', e.message)
}
}
我有我以前通过此处的标头用于身份验证的内容:
const authMiddleware = new ApolloLink((operation, forward) => {
// add the authorization to the headers
const token = localStorage.getItem(AUTH_TOKEN)
operation.setContext({
headers: {
authorization: token ? `Bearer ${token}` : null
}
})
return forward(operation)
})
似乎当我更深入地研究从 vue-apollo 包中导入的一些对象时,已经在createApolloClient
具有此属性的对象中内置了类似的东西:
authLink = setContext(function (_, _ref2) {
var headers = _ref2.headers;
return {
headers: _objectSpread({}, headers, {
authorization: getAuth(tokenName)
})
};
});
这是否意味着我可以简单地解构createApolloClient
对象的属性?非常感谢任何帮助或提示。
解决方案
Take a look at vue-cli-plugin-apollo
You can pass a link: authLink
and\or getAuth:()=>{return "something"}
in const defaultOptions = { ... }
in /vue-apollo.js
.
Or in main.js
when you call createProvider
new Vue({
// router, store
apolloProvider: createProvider({
link: authLink,
getAuth: AUTH_TOKEN => localStorage.getItem(AUTH_TOKEN)
}),
// ...
})
using both if you adding header in authLink, getAuth is probably redundant.
- if you plan to use more than one link, there is apollo-link package
link: ApolloLink.from([ ... ])
推荐阅读
- azure-ad-b2c - 生产中的魔术链接和“message.state 为空或为空”
- gradle - java.lang.ClassNotFoundException: org.jsoup.Jsoup 在运行时
- powershell - 如何将 jenkinsfile 参数传递给 powershell 脚本
- reactjs - Redux-Saga 调用后组件未重新渲染
- jpa - 无法为 jpa 规范编写 junit 测试用例
- python - 仅使用入队和出队来反转队列
- r - 使用方括号和索引在 R 中进行两次子集化
- java - 当 xml 文件包含日期时,使用 import com.thoughtworks.xstream.XStream 时出现问题
- .net - 使用 checkMarx 工具在代码扫描期间遇到 checkMarx 路径遍历问题
- office365 - 如何更改 PowerPoint 幻灯片的背景颜色?