vue3 使用路由守卫进行鉴权

www.jswusn.com Other 2025-01-14 10:45:55 123次浏览
网站首页 >> 技术分享 >> Other

1. vue3 使用路由守卫跳转到登录页

在 Vue 3 中使用 Vue Router 进行路由守卫来判断用户是否登录，并在未登录时跳转到登录页面，是一个常见的需求。

这可以通过全局前置守卫 beforeEach 来实现。

下面是一个详细的步骤指南，帮助你在 Vue 3 项目中配置和使用路由守卫。

1.1. 安装 Vue Router

首先，确保你已经安装了 Vue Router。

如果还没有安装，可以通过 npm 或 yarn 安装：

npm install vue-router@next

或

yarn add vue-router@next

1.2. 配置路由

在项目的 src 目录下创建一个 router 文件夹，并在其中创建一个 index.js 文件来配置路由。

import { createRouter, createWebHistory } from'vue-router'
importHomefrom'../views/Home.vue'
importAboutfrom'../views/About.vue'
importLoginfrom'../views/Login.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    meta: { requiresAuth: true }  // 标记需要登录的路由
  },
  {
    path: '/about',
    name: 'About',
    component: About,
    meta: { requiresAuth: true }  // 标记需要登录的路由
  },
  {
    path: '/login',
    name: 'Login',
    component: Login
  },
  {
    path: '/:pathMatch(.*)*',
    name: 'NotFound',
    component: () =>import('../views/NotFound.vue')
  }
]

const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
  routes
})

exportdefault router

1.3. 注册路由

在项目的主文件 main.js 或 main.ts 中注册路由：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

createApp(App).use(router).mount('#app')

1.4. 创建登录页面组件

在 src/views 目录下创建一个 Login.vue 文件，编写登录页面的模板和逻辑。

<template>
  <div class="login">
    <h1>登录</h1>
    <form @submit.prevent="handleLogin">
      <div>
        <label for="username">用户名:</label>
        <input type="text" id="username" v-model="username" required />
      </div>
      <div>
        <label for="password">密码:</label>
        <input type="password" id="password" v-model="password" required />
      </div>
      <button type="submit">登录</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    handleLogin() {
      // 这里可以添加登录逻辑，例如调用 API 进行身份验证
      // 假设登录成功
      localStorage.setItem('isAuthenticated', 'true')
      this.$router.push({ name: 'Home' })
    }
  }
}
</script>

<style scoped>
.login {
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
}
</style>

1.5. 配置全局前置守卫

在 router/index.js 中添加全局前置守卫 beforeEach，用于判断用户是否登录，并在未登录时跳转到登录页面。

import { createRouter, createWebHistory } from'vue-router'
importHomefrom'../views/Home.vue'
importAboutfrom'../views/About.vue'
importLoginfrom'../views/Login.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    meta: { requiresAuth: true }  // 标记需要登录的路由
  },
  {
    path: '/about',
    name: 'About',
    component: About,
    meta: { requiresAuth: true }  // 标记需要登录的路由
  },
  {
    path: '/login',
    name: 'Login',
    component: Login
  },
  {
    path: '/:pathMatch(.*)*',
    name: 'NotFound',
    component: () =>import('../views/NotFound.vue')
  }
]

const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
  routes
})

// 全局前置守卫
router.beforeEach((to, from, next) => {
const requiresAuth = to.matched.some(record => record.meta.requiresAuth)
const isAuthenticated = localStorage.getItem('isAuthenticated') === 'true'

if (requiresAuth && !isAuthenticated) {
    next({ name: 'Login' })
  } else {
    next()
  }
})

exportdefault router

1.6. 测试

启动你的 Vue 3 项目，尝试访问需要登录的页面（例如 / 或 /about），如果你未登录，应该会被重定向到登录页面 /login。

登录成功后，你应该能够访问这些页面。

1.7. 退出登录

在用户退出登录时，清除认证状态并重定向到登录页面。

你可以在 Logout.vue 组件中实现这一点：

<template>
  <div>
    <h1>退出登录</h1>
    <button @click="logout">退出</button>
  </div>
</template>

<script>
export default {
  methods: {
    logout() {
      localStorage.removeItem('isAuthenticated')
      this.$router.push({ name: 'Login' })
    }
  }
}
</script>