vue3登录页面路由守卫
时间: 2023-09-19 14:12:31 浏览: 48
Vue 3 中的路由守卫和 Vue 2 中的路由守卫类似,但有一些细微的差异。下面是一个示例,展示了如何在 Vue 3 中实现登录页面的路由守卫:
首先,确保你已经安装了 Vue Router。然后,在创建 Vue 应用程序时,导入 Vue Router 并将其添加为插件。
```javascript
import { createApp } from 'vue';
import { createRouter, createWebHistory } from 'vue-router';
const router = createRouter({
history: createWebHistory(),
routes: [
// 定义你的路由
// ...
],
});
const app = createApp(App);
app.use(router);
app.mount('#app');
```
接下来,在路由配置中,你可以使用 `beforeEnter` 守卫来检查用户是否已登录。如果用户未登录,则可以将其重定向到登录页面。
```javascript
const routes = [
{
path: '/',
name: 'Home',
component: Home,
meta: { requiresAuth: true }, // 添加 requiresAuth 属性
},
{
path: '/login',
name: 'Login',
component: Login,
},
];
router.beforeEach((to, from, next) => {
if (to.meta.requiresAuth && !isLoggedIn()) {
// 用户未登录,重定向到登录页面
next('/login');
} else {
next();
}
});
function isLoggedIn() {
// 检查用户是否已登录
// 返回 true 或 false
}
```
在上面的代码中,我们为需要进行身份验证的路由添加了 `requiresAuth` 元数据。然后,`beforeEach` 守卫会在每次路由切换前执行。它会检查目标路由是否需要身份验证,并且用户是否已登录。如果用户未登录,则会将其重定向到登录页面。
当用户尝试访问受保护的路由时,路由守卫将自动执行。
请注意,上述代码中的 `isLoggedIn` 函数是一个示例,代表检查用户是否已登录的逻辑。你需要根据自己的实际情况来实现该函数。
希望这能帮助到你!如有其他问题,请随时提问。