保护Vue应用页面免受未登录用户的访问
P粉598140294
P粉598140294 2023-09-01 11:46:55
0
1
600
<p>我开始使用supabase作为firebase的替代品。我正在为我的vue webapp实现一个简单的身份验证系统,我对重定向有疑问。 我使用了魔术链接解决方案来让用户登录https://supabase.com/docs/guides/auth/auth-magic-link,但我不确定如何在开发过程中正确设置本地主机上的登录重定向以及如何防止未登录用户查看视图。</p> <p>我已经实现了pinia和vue router,在目前的主页中,这是我用来让用户登录的代码:</p> <pre class="brush:js;toolbar:false;">import { supabase } from '../supabase/supabase' export default { name: 'HomeView', data() { return { userEmail: null } }, created() { }, mounted() { //this.initGoogleAuth() }, methods: { initMagicLinkAuth() { supabase.auth.signInWithOtp({ email: this.userEmail, options: { emailRedirectTo: '/about' } }) } } } </pre> <p>在模板中,我有一个简单的电子邮件输入字段:</p> <pre class="brush:html;toolbar:false;"><input type="email" class="form-control" placeholder="Email" v-model="userEmail"> <div class="d-grid gap-2"> <button class="btn btn-primary" @click.prevent="initMagicLinkAuth()">Login</button> </div> </pre> <p>在我的路由器中,我有以下代码:</p> <pre class="brush:js;toolbar:false;">import { createRouter, createWebHistory } from 'vue-router' import HomeView from '../views/HomeView.vue' const router = createRouter({ history: createWebHistory(import.meta.env.BASE_URL), routes: [ { path: '/', name: 'home', component: HomeView }, { path: '/about', name: 'about', component: () => import('../views/AboutView.vue') } ] }) export default router </pre> <p>如何正确设置vue router以防止未登录用户导航,并如何正确设置supabase以进行重定向?</p>
P粉598140294
P粉598140294

全部回复(1)
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!