我在vue-3应用程序中使用websanova/vue 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",
        },
    }));
}

主要的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/授权.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"
    }
}

request user enter image description here

标题中没有"授权"

我的websanova/vue auth设置有什么问题?

推荐答案

我在同一天解决了这个问题.

注意:令牌的头键应该是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');

Javascript相关问答推荐

按钮未放置在html dis位置

如何从JSON数组添加Google Maps标记—或者如何为数组添加参数到标记构造器

如何解决chrome—extension代码中的错误,它会实时覆盖google—meet的面部图像?'

如何从一个列表中创建一个2列的表?

Spring boot JSON解析错误:意外字符错误

使用useEffect,axios和useParams进行react测试

在Three JS中看不到补间不透明度更改效果

如何从HTML对话框中检索单选项组的值?

搜索功能不是在分页的每一页上进行搜索

如何确保预订系统跨不同时区的日期时间处理一致?

触发异步函数后不能显示数据

如果NetSuite中为空,则限制筛选

ReferenceError:无法在初始化之前访问setData

TabNavigator和StackNavigator之间的Reaction Native中的导航问题

我如何才能获得价值观察家&对象&S的价值?

KeyboardEvent:检测到键具有打印的表示形式

如何用react组件替换dom元素?

如何创建一个for循环,用于计算仪器刻度长度并将其放入一个HTML表中?

当一条路由在Reaction路由中命中时,如何有条件地渲染两个组件或更改两个插座?

在JS/TS中构造RSA公钥