![](/img/trans.png)
[英]Vuejs / Vue-auth Token is removed from localStorage in IE and Edge works in Chrome and FF
[英]websanova/vue-auth not set bearer token vue 3
我在我的 vue-3 應用程序中使用 websanova/vue-auth 進行身份驗證。 我按照文檔登錄成功,但是當我嘗試獲取用戶時,它沒有傳遞令牌或不記名令牌。
vue-auth 配置。
auth.js
import {createAuth} from '@websanova/vue-auth/src/v3.js';
import driverAuthBearer from '@websanova/vue-auth/src/drivers/auth/bearer.js';
import driverHttpAxios from '@websanova/vue-auth/src/drivers/http/axios.1.x.js';
import driverRouterVueRouter from '@websanova/vue-auth/src/drivers/router/vue-router.2.x.js';
import driverOAuth2Google from '@websanova/vue-auth/src/drivers/oauth2/google.js';
import driverOAuth2Facebook from '@websanova/vue-auth/src/drivers/oauth2/facebook.js';
driverOAuth2Google.params.client_id = 'google-key';
driverOAuth2Facebook.params.client_id = 'facebook-key';
export default (app) => {
app.use(createAuth({
plugins: {
http: app.axios,
router: app.router,
},
drivers: {
http: driverHttpAxios,
auth: driverAuthBearer,
router: driverRouterVueRouter,
oauth2: {
google: driverOAuth2Google,
facebook: driverOAuth2Facebook,
}
},
options: {
rolesKey: 'type',
notFoundRedirect: {name: 'notfound'},
fetchData: { url: `auth/user`, method: 'GET', enabled: true, authType: 'bearer' },
refreshData: { url: `auth/user`, method: 'GET', enabled: true, interval: 30, authType: 'bearer' },
authType: "bearer",
},
}));
}
main.js
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
import router from './router'
import auth from './plugins/auth.js';
import axios from './plugins/axios.js';
const app = createApp(App);
app.router = router
app.use(axios)
app.axios.defaults.baseURL = process.env.VUE_APP_API_URL;
app.use(ElementPlus)
app.use(router)
app.use(auth)
app.mount('#app')
登錄表單
await auth.login({
data: form,
authType: "bearer",
redirect: '/dashboard',
fetchUser: true,
staySignedIn: true,
rememberMe: true,
})
.then(null, (res) => {
errors(res.response);
});
登錄響應
{
"token":"eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9...",
"data":{
"id":3,
"name":"john Doe",
"email":"john@doe.com",
"email_verified_at":null,
"created_at":"2022-06-25T12:36:40.000000Z",
"updated_at":"2022-06-25T12:36:40.000000Z"
}
}
標題中沒有“授權”,當我使用 vue-router $auth.check() 重新加載頁面或轉到其他頁面時,返回 false。
我的 websanova/vue-auth 設置有什么問題?
我在同一天解決了這個問題。 websanova/vue-auth 包將查看位於 API 標頭響應中的令牌。 所以就我而言,我使用 Laravel 的解決方案是將令牌包含在 API 的標頭響應中。
注意:令牌的標頭鍵應該是authorization
,您應該添加Access-Control-Expose-Headers
響應標頭,其值為Authorization
代碼:
// transform user data
$data = new UserResource($user);
return response()
->json(compact('token', 'data'))
->header('authorization', $token)
->header('Access-Control-Expose-Headers', 'Authorization');
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.