https://qiita.com/itouuuuuuuuu/items/1dc6401022e0d771c757
こちらを参考にjwtの認証リクエスト部分を作成しました。
Uncaught (in promise) TypeError: Cannot read property 'setHeader' of undefined
このようなエラーがでて、内容を見てみると、
_clearToken () { if (this.options.globalToken) { // Clear Authorization token for all axios requests this.$auth.ctx.app.$axios.setHeader(this.options.tokenName, false) } }
ここのthis.$auth.ctx.app.$axios
$axiosが参照出来ないためsetHeaderないとおこられていました。
@nuxtjs/authのバージョンを最新にしても、3.x.xにしてもダメだったので、解決法がわかりませんでした。
どうようの事象発生している、改善しているかたがいらっしゃればお教えください。
実装は以下のとおりです。
package.json
{ "name": "jwt", "version": "1.0.0", "description": "My superb Nuxt.js project", "author": "iku8", "private": true, "scripts": { "dev": "nuxt", "build": "nuxt build", "start": "nuxt start", "generate": "nuxt generate" }, "dependencies": { "@nuxtjs/auth": "^4.8.5", "@nuxtjs/pwa": "^3.0.0-0", "nuxt": "^2.0.0" }, "devDependencies": {} }
pages/login.vue
<template> <div> <input type="email" v-model="form.email"> <input type="password" v-model="form.password"> <button @click="login">ログイン</button> {{ form }} </div> </template> <script> export default { data () { return { form: { email: '', password: '' } } }, methods: { login () { //console.log(this.$auth.ctx.app.$axios) this.$auth.login({data: this.form}); } } } </script>
nuxt.config.jsに以下追記
axios: { host: 'localhost', port: 8000, }, auth:{ strategies: { local: { //自前の認証処理を実行する endpoints: { login: { //ログインを実行する際のリクエスト設定 url: 'api/login', method: 'post', propertyName: 'token' }, user:{ //ログイン済みのユーザ情報取得を実行する際のリクエスト設定 url: 'me', method: 'get', propertyName: 'data' }, logout: { //ログアウトを実行する際のリクエスト設定 url: 'api/logout', method: 'get' }, }, }, }, redirect: { login: '/api/login', //未ログインユーザが認証が必要な画面にアクセスした際のリダイレクト先 home: '/' //ログイン後のリダイレクト先 }, }
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。