hen*_*ool 5 apollo vue.js apollo-client vue-cli vue-apollo
我正在尝试对我的 SPA 实施 JWT 身份验证,登录和注销已完成,但我无法找出实施刷新令牌的正确(或只是工作)方法,任何帮助将不胜感激!
我找不到任何有关通过 Vue Appollo 处理刷新令牌的教程。有“ Vue CLI Apollo 插件”
createApolloClient({
...
// Custom pre-auth links
// Useful if you want, for example, to set a custom middleware for refreshing an access token.
preAuthLinks: [],
...})
Run Code Online (Sandbox Code Playgroud)
但没有关于实现它的示例,并且看起来“Vue CLI Apollo 插件”已被弃用,它长时间更新并且无法与 VUE CLI 4 一起使用。
当前的前端堆栈是:
Vue-cli 4.5,
Apollo/client 3.5.8
Vue-apollo-option 4.0.0
Graphql 16.3.0
Vuex 4.0
Run Code Online (Sandbox Code Playgroud)
我的 vue-apollo.js 配置:
import { createApolloProvider } from "@vue/apollo-option";
import { AUTH_TOKEN } from "@/constants/settings";
import {
ApolloClient,
createHttpLink,
InMemoryCache,
ApolloLink,
} from "@apollo/client/core";
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);
});
const httpLink = createHttpLink({ uri: "http://127.0.0.1:8000/graphql" });
const cache = new InMemoryCache();
export const apolloClient = new ApolloClient({
link: authMiddleware.concat(httpLink),
cache,
});
export function createProvider() {
const apolloProvider = createApolloProvider({
defaultClient: apolloClient,
defaultOptions: {
$query: {
fetchPolicy: "cache-and-network",
},
},
errorHandler(error) {
console.log("%Appollo error!", error.message);
},
});
return apolloProvider;
}
Run Code Online (Sandbox Code Playgroud)
那么,现在可以在authMiddleware的帮助下登录、存储令牌、在每个请求中粘贴令牌,但是在哪里以及如何实现令牌刷新?预先感谢您的任何帮助!
| 归档时间: |
|
| 查看次数: |
861 次 |
| 最近记录: |