vue element-ui 笔记 -挂载路由导航守卫

原创于 2021-06-19 08:43:59 发布 · 341 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

前端专栏收录该内容

8 篇文章

订阅专栏

本文介绍了如何在Vue应用中使用Vue Router设置路由，并实现了一个基本的登录守卫，确保只有持有有效token的用户才能访问除登录页面外的其他页面。

在router/index.js加入代码

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
]

const router = new VueRouter({
  routes
})

// 挂载导航守卫
router.beforeEach((to, from, next) => {
  // to 将要访问的路径
  // from 从哪个路径跳转而来
  // next 是一个函数，表示放行
  //    next() 直接放行 next('/login') 强制跳转到指定的路由
  if (to.path === '/login') return next()
  // 获取token
  const tokenStr = window.sessionStorage.getItem('token')
  if (!tokenStr) return next('/login')
  next()
})

export default router