vue路由实现登录拦截


Posted in Vue.js onMarch 24, 2021

一、概述

在项目开发中每一次路由的切换或者页面的刷新都需要判断用户是否已经登录,前端可以判断,后端也会进行判断的,我们前端最好也进行判断。

vue-router提供了导航钩子:全局前置导航钩子 beforeEach和全局后置导航钩子 afterEach,他们会在路由即将改变前和改变后进行触发。所以判断用户是否登录需要在beforeEach导航钩子中进行判断。

导航钩子有3个参数:

  1、to:即将要进入的目标路由对象;

  2、from:当前导航即将要离开的路由对象;

  3、next :调用该方法后,才能进入下一个钩子函数(afterEach)。

        next()//直接进to 所指路由
        next(false) //中断当前路由
        next('route') //跳转指定路由
        next('error') //跳转错误路由

二、路由导航守卫实现登录拦截

这里用一个空白的vue项目来演示一下,主要有2个页面,分别是首页和登录。

访问首页时,必须要登录,否则跳转到登录页面。

新建一个空白的vue项目,在src\components创建Login.vue

<template>
 <div>这是登录页面</div>
</template>
 
<script>
 export default {
  name: "Login"
 }
</script>
 
<style scoped>
 
</style>

修改src\router\index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Login from '@/components/Login'
 
 
Vue.use(Router)
 
const router = new Router({
 mode: 'history', //去掉url中的#
 routes: [
 {
  path: '/login',
  name: 'login',
  meta: {
  title: '登录',
  requiresAuth: false, // false表示不需要登录
  },
  component: Login
 },
 {
  path: '/',
  name: 'HelloWorld',
  meta: {
  title: '首页',
  requiresAuth: true, // true表示需要登录
  },
  component: HelloWorld
 },
 
 ]
})
 
// 路由拦截,判断是否需要登录
router.beforeEach((to, from, next) => {
 if (to.meta.title) {
 //判断是否有标题
 document.title = to.meta.title;
 }
 // console.log("title",document.title)
 // 通过requiresAuth判断当前路由导航是否需要登录
 if (to.matched.some(record => record.meta.requiresAuth)) {
 let token = localStorage.getItem('token')
 // console.log("token",token)
 // 若需要登录访问,检查是否为登录状态
 if (!token) {
  next({
  path: '/login',
  query: { redirect: to.fullPath }
  })
 } else {
  next()
 }
 } else {
 next() // 确保一定要调用 next()
 }
})
 
export default router;

说明:

在每一个路由中,加入了meta。其中requiresAuth字段,用来标识是否需要登录。

在router.beforeEach中,做了token判断,为空时,跳转到登录页面。

访问首页

http://localhost:8080

会跳转到

http://localhost:8080/login?redirect=%2F

效果如下:

vue路由实现登录拦截

打开F12,进入console,手动写入一个token

localStorage.setItem('token', '12345678910')

效果如下:

vue路由实现登录拦截

再次访问首页,就可以正常访问了。

vue路由实现登录拦截

打开Application,删除Local Storage里面的值,右键,点击Clear即可

vue路由实现登录拦截

刷新页面,就会跳转到登录页面。

怎么样,是不是很简单呢!

Vue.js 相关文章推荐
vue3.0实现点击切换验证码(组件)及校验
Nov 18 Vue.js
Vue使用Element实现增删改查+打包的步骤
Nov 25 Vue.js
Vue 实现一个简单的鼠标拖拽滚动效果插件
Dec 10 Vue.js
Vue3 实现双盒子定位Overlay的示例
Dec 22 Vue.js
vue浏览器返回监听的具体步骤
Feb 03 Vue.js
Vue-router编程式导航的两种实现代码
Mar 04 Vue.js
vue项目实现分页效果
Mar 24 Vue.js
vue-element-admin项目导入和导出的实现
May 21 Vue.js
vue实现锚点定位功能
Jun 29 Vue.js
vue项目多环境配置(.env)的实现
Jul 21 Vue.js
Vue实现跑马灯样式文字横向滚动
Nov 23 Vue.js
vue生命周期钩子函数以及触发时机
Apr 26 Vue.js
vue项目实现分页效果
Mar 24 #Vue.js
vue实现倒计时功能
Mar 24 #Vue.js
vue 中 get / delete 传递数组参数方法
Mar 23 #Vue.js
使用Vue.js和MJML创建响应式电子邮件
vue+flask实现视频合成功能(拖拽上传)
Mar 04 #Vue.js
vue打开新窗口并实现传参的图文实例
Mar 04 #Vue.js
Vue-router编程式导航的两种实现代码
Mar 04 #Vue.js
You might like
3.从实例开始
2006/10/09 PHP
php bootstrap实现简单登录
2016/03/08 PHP
PHP微信开发之根据用户回复关键词\位置返回附近信息
2016/06/24 PHP
Yii2实现log输出到file及database的方法
2016/11/12 PHP
PHP快速推送微信模板消息
2017/04/14 PHP
共享自己写一个框架DreamScript
2007/01/20 Javascript
javascript实现轮显新闻标题链接
2007/08/13 Javascript
番茄的表单验证类代码修改版
2008/07/18 Javascript
详解jQuery UI库中文本输入自动补全功能的用法
2016/04/23 Javascript
JS实现iframe自适应高度的方法(兼容IE与FireFox)
2016/06/24 Javascript
Vuejs第七篇之Vuejs过渡动画案例全面解析
2016/09/05 Javascript
Vue.js仿微信聊天窗口展示组件功能
2017/08/11 Javascript
微信小程序组件之srcoll-view的详解
2017/10/19 Javascript
nodejs结合Socket.IO实现的即时通讯功能详解
2018/01/12 NodeJs
vue.js实现点击后动态添加class及删除同级class的实现代码
2018/04/04 Javascript
浅谈Angular6的服务和依赖注入
2018/06/27 Javascript
微信小程序CSS3动画下拉菜单效果
2018/11/04 Javascript
angular6 填坑之sdk的方法
2018/12/27 Javascript
vue使用原生swiper代码实例
2020/02/05 Javascript
vue 路由守卫(导航守卫)及其具体使用
2020/02/25 Javascript
pycharm 使用心得(一)安装和首次使用
2014/06/05 Python
在Django的模板中使用认证数据的方法
2015/07/23 Python
遍历python字典几种方法总结(推荐)
2016/09/11 Python
Python中创建字典的几种方法总结(推荐)
2017/04/27 Python
Python3中正则模块re.compile、re.match及re.search函数用法详解
2018/06/11 Python
python3中pip3安装出错,找不到SSL的解决方式
2019/12/12 Python
使用pyinstaller逆向.pyc文件
2019/12/20 Python
爱尔兰家电数码商城:Currys PC World爱尔兰
2016/07/23 全球购物
好矿嫂事迹材料
2014/01/21 职场文书
送餐员岗位职责范本
2014/02/21 职场文书
征婚广告词
2014/03/17 职场文书
起诉离婚协议书样本
2014/11/25 职场文书
飞越疯人院观后感
2015/06/09 职场文书
业余无线电通联Q语
2022/02/18 无线电
Win11安全功能升级:内置防网络钓鱼功能
2022/04/08 数码科技
Python开发五子棋小游戏
2022/05/02 Python