江苏龙网

  1. 主页 > 生活百科 > >

如何在 Vuejs 中使用 Supertokens 的预构建 UI( 二 )

Vuejs

上面的代码片段使用ThirdPartyEmailPassword配方（社交+电子邮件/密码登录） 。您也可以按照supertokens.com 指南中的快速设置部分选择其他配方 。
接下来，我们将SuperTokensReactComponent在AuthView组件中加载它：
Vue.js 组件
<script lang="ts">import * as React from "react";import * as ReactDOM from "react-dom";import SuperTokensReactComponent from "../components/Supertokens";export default{    mounted(){        ReactDOM.render(React.createElement(SuperTokensReactComponent),            document.getElementById('authId'));    }    beforeDestroy(){        ReactDOM.unmountComponentAtNode(document.getElementById('authId') as Element);    }}</script>上面处理了/auth/*相关的路线 。对于我们应用程序中的所有其他页面，我们希望能够知道会话是否存在并从中提取信息 。为此，我们将使用supertokens-web-jsSDK 。我们在 Vue 应用程序的根文件中初始化这个 SDK /src/main.ts：
Vue.js 组件
import Vue from "vue";import VueCompositionAPI, { createApp, h } from "@vue/composition-api";import * as SuperTokens from "supertokens-web-js";import * as Session from "supertokens-web-js/recipe/session";import App from "./App.vue";import router from "./router";SuperTokens.init({appInfo: {appName: "SuperTokens Demo",apiDomain: "http://localhost:3001",},recipeList: [Session.init()],});Vue.use(VueCompositionAPI);const app = createApp({router,render: () => h(App),});app.mount("#app");
Session.init调用的配置，函数 (和)的theapiDomain和 the应该始终相同 。 appNameinitsupertokens-auth-reactsupertokens-web-js
3. 设置路由以显示登录 UIVue CLI 已经为我们的应用生成了初始路由/src/router.index.ts 。我们将更新此文件，以便所有/auth/*路由都加载AuthView我们之前创建的组件：
Vue.js 组件
import Vue from 'vue'import VueRouter from 'vue-router'import HomeView from '../views/HomeView.vue'Vue.use(VueRouter)const router = new VueRouter({    mode: 'history',    base: import.meta.env.BASE_URL,    routes: [{        path:'/auth*',        name:'auth',        component: () => import('../views/AuthView.vue'),    }]})export default router组件的路径AuthView是/auth* 。*表示任何作为父路径的子/嵌套路径都/auth应该由AuthView组件呈现 。该AuthView组件将依次渲染我们之前创建的 ReactJS 组件，该组件将使用supertokens-auth-reactSDK 显示身份验证 UI 。
我们延迟加载/auth路由，因为AuthView组件将 ReactJS 作为依赖项加载 。延迟加载确保这些依赖项仅在AuthView您访问/auth/*路由时注入到组件中 。对于所有其他路由，不会导入这些依赖项，从而保持应用程序的整体包大小 。
4.查看登录界面如果您现在访问
http://localhost:4200/auth，您应该会看到如下所示的登录 UI：
如何在 Vuejs 中使用 Supertokens 的预构建 UI

文章插图
 
后端集成您可以在 supertokens.com 上的文档中查看后端快速设置部分，甚至可以从我们的示例应用程序中复制代码 。总结：
  • 您需要初始化supertokens-nodeSDK 并提供它recipeList（类似于您在前端所做的） 。
  • 然后您需要设置CORS、添加 SuperTokensmiddleware和errorHandler到您的应用程序 。SuperTokens 向前端middleware公开所有与身份验证相关的 API 路由（如登录、注册、注销等） 。
  • 最后，您需要提供connectionURISuperTokens 核心的（位置） 。为了快速开始，您可以提供它https://try.supertokens.com（这是我们为演示目的而托管的核心） 。
成功设置服务器后，您现在可以尝试在前台注册 。
会话管理在/src/views/HomeView.vue文件中，我们将检查用户是否经过身份验证并有条件地呈现模板 。对于经过身份验证的用户，我们可以向他们显示一个注销按钮，其中包含有关其会话的信息（例如他们的userId） 。对于未经身份验证的用户，我们可以向他们显示一个按钮以路由到该/auth页面 。
Vue.js 组件
<script lang="ts">import * as Session from "supertokens-web-js/recipe/session";export default {data() {return {session: false,userId: "",};},mounted() {this.getUserInfo();},methods: {redirectToLogin() {window.location.href = https://www.isolves.com/it/cxkf/qd/2022-08-18/"/auth";},async getUserInfo() {this.session = await Session.doesSessionExist();if (this.session) {this.userId = await Session.getUserId();}},async onLogout() {await Session.signOut();window.location.reload();},},};


推荐阅读


上一篇：手机信号满格，4G网速却一直很慢？多半是这4种原因，望周知

下一篇：10种有用的Linux Bash_Completion 命令示例