Vue身份验证
P粉765684602
2023-08-18 10:33:04
<p>我正在使用Vue构建这个小应用程序，但我无法使身份验证工作。确切地说，重定向不起作用，我同时获得了true和Authenticated的日志，但我没有被重定向到主页(/)。但是当我打开应用程序时，我立即被带到/login，这是可以的，我也希望如此，但正如我所说，当我尝试登录时，我没有被重定向。</p>
<p>这是我的登录组件和路由器。</p>
<pre class="brush:php;toolbar:false;">import { createRouter, createWebHistory } from 'vue-router'
import LoginView from '@/views/LoginView.vue'
import AboutView from '../views/AboutView.vue';
import isAuthenticated from '@/views/LoginView.vue';
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: '/login',
name: 'Login',
component: LoginView
},
{
path: '/',
name: 'Home',
meta: {
requiresAuth: true
},
component: AboutView,
beforeEnter:(to,_,next)=>{
if(to.meta.requiresAuth && !isAuthenticated.value){
next('/login');
}
else{
next();
router.push('/');
}
}
}
]
})
export default router</pre>
<pre class="brush:php;toolbar:false;"><template>
<div>
<h2>输入访问令牌以登录</h2>
<hr />
<div class="col-md-8">
<section id="loginForm">
<form @submit.prevent="checkAccessToken">
<div class="form-group">
<label><b>访问令牌</b></label>
<input v-model="accessToken" type="password" class="form-control" />
</div>
<input type="submit" value="登录" class="btn btn-primary" />
</form>
</section>
</div>
</div>
</template>
<script setup lang="ts">
import { ref} from 'vue'
import router from '@/router/index'
const isAuthenticated = ref(false);
const accessToken = ref('');
const checkAccessToken = () => {
if (accessToken.value === '123') {
isAuthenticated.value = true;
console.log(isAuthenticated.value);
console.log('已验证');
router.push('/');
} else {
}
};
</script></pre>
<p><br /></p>
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
如果只有
router.push()不起作用那么尝试使用类似于vue-router的导入方式
import { useRouter } from 'vue-router' const router = useRouter();然后使用
router.push('/')