怎么在vue中利用路由守卫判断是否登录

路由守卫是Vue Router的一个重要特性之一，它允许我们在路由切换前进行一些检查或者操作。在Vue应用中，路由守卫可以用来判断用户是否已经登录或者是否有权限访问某些路由，确保页面安全性。接下来我们来看下如何在Vue中利用路由守卫判断是否登录。

一、前置知识

在了解路由守卫的使用方式之前，我们需要先了解一些基础知识，包括：

1.路由的基本概念

路由（Route）是指根据不同的URL地址来展示不同的内容或页面，通过 vue-router 框架可以实现前端路由功能。如下将 url 映射组件的定义：

const Home = { template: '<div>Home</div>' }
const About = { template: '<div>About</div>' }
const routes = [
  { path: '/home', component: Home },
  { path: '/about', component: About }
]
const router = new VueRouter({
  routes // （缩写）相当于 routes: routes
})

`

2.路由守卫的基本概念

路由守卫是Vue Router提供的一种钩子函数，它可以在导航过程中拦截不同的阶段，并执行相应的逻辑。Vue Router提供了全局守卫、路由守卫和组件守卫等不同的守卫类型，可以用来验证用户是否有权限访问或执行其他操作。

对于路由守卫，我们主要使用 beforeEnter 和 beforeEach 钩子函数。其中：

- beforeEnter：用来对某个路由进行单独设置守卫。

- beforeEach：用来设置全局路由守卫。

二、利用路由守卫判断是否登录

在Vue中，登录状态通常是存在 Vuex 或者 local storage 中的，当用户进行路由跳转时，我们可以利用路由守卫来判断其是否已经登录，如果未登录则执行相应的操作，如弹出登录框或者跳转到登录页面。

下面我们将详细介绍如何利用路由守卫判断是否登录。

1. 在main.js中设置路由守卫

在 Vue 项目中，我们一般将路由的配置单独放在一个文件中，例如：router.js。在 router.js 中，我们可以定义一个全局的 beforeEach 钩子函数，用于判断用户是否登录，示例如下：

import router from './router'
const whiteList = ['/login'] // 白名单列表
router.beforeEach((to, from, next) => {
  if (whiteList.indexOf(to.path) !== -1) { // 如果在白名单中，则直接进入
    next()
  } else {
    const token = localStorage.getItem('token') // 通过 localStorage 获取用户登录状态
    if (token) { // 如果已登录，则进入
      next()
    } else { // 如果未登录，则跳转到登录页面
      next({ path: '/login' })
    }
  }
})

我们可以在全局路由守卫中定义一个白名单，将不需要进行鉴权的路由跳转许可。对于需要鉴权的路由，我们可以利用 localStorage 中存储的 token 值来判断用户是否已登录。如果已登录，则继续跳转对应的路由，否则强制跳转到登录页面。

2. 实现登录和退出功能

在路由守卫中，我们通过 localStorage 获取用户登录状态，因此需要在登录和退出功能中，实现 localStorage 写入和清除操作。

在登录页面中，用户输入正确的账号密码后，应该将 token 值存储至 localStorage 中，用于之后的页面跳转。

// login.vue
const token = 'myToken' // 模拟 token 值
localStorage.setItem('token', token) // 存储 token 值
this.$router.push('/home') // 跳转到首页

在用户退出登录时，需要清除 localStorage 中存储的 token 值。

// user.js
logout() {
  localStorage.removeItem('token') // 清除 token 值
  this.$router.push('/login') // 跳转到登录页面
}

三、总结

通过上述例子，我们学习了如何在 Vue 项目中，利用路由守卫来判断用户是否已登录，从而达到页面安全性的目的。同时，在这个过程中还涉及到了 Vuex 和 localStorage 的使用，对于 Vue 的深度学习也有很大帮助。

除了判断登录状态以外，路由守卫还可以用来判断用户权限、流量限制等等场景。希望通过本文的介绍，大家能够对路由守卫的应用有更深的理解，进一步优化自己的前端开发技能。