1. 功能需求

  1. 当用户登陆成功后,把得到的token存到Session Storage

  2. components -> Form.vue , 对预验证进行校验,如果验证不正确就跳出,如果正确,就通过axios请求token接口,并且把token存入Session Storage

this.$refs.FormRef.validate(async valid => {
if (!valid) return
const {data:res} = await this.$http.post("token", this.Form)
  // 把token存入session Storage
window.sessionStorage.setItem('token', res.token)
});

  3. 存入token后,路由跳转到demo1

this.$refs.FormRef.validate(async valid => {
if (!valid) return
const {data:res} = await this.$http.post("token", this.Form)
console.log(res)
window.sessionStorage.setItem('token', res.token)
// 路由跳转
this.$router.push('/demo1')
});

  4. 演示

  

  5. 例如我们登陆后直接进入了/demo1 , 当我们把token删除,自动跳转到/form ,不给访问/demo1, 但是现在事无法实现的,所以要加路由导航首位

2. 路由导航守卫

  1. 路由导航守卫控制访问权限

  2. 编辑index.js

// 挂载路由导航守卫
router.beforeEach((to, from, next) => {
/**
* to: 将要访问的路径
* from: 从哪个路径挑战
* next: 放行
*/
if (to.path === '/form') return next()
// 获取token ,如果token不存在跳转到/form
const tokenStr = window.sessionStorage.getItem('token')
if (!tokenStr) return next('/form')
next()
}) export default router

  3. 功能实现,当登陆后检查token,如果有token,则访问/demo1 如果没有则跳转到/form

项目地址:https://github.com/wangxiao9/vue_coding.git

【VUE】5.路由导航守卫的更多相关文章

  1. vue之路由导航守卫-全局前置守卫

    一.使用方式 全局前置守卫用于在路由配置生效之前进行一些动作,可以使用 router.beforeEach 注册一个全局前置守卫: const router = new VueRouter({ ... ...

  2. Vue的钩子函数[路由导航守卫、keep-alive、生命周期钩子]

    前言 说到Vue的钩子函数,可能很多人只停留在一些很简单常用的钩子(created,mounted),而且对于里面的区别,什么时候该用什么钩子,并没有仔细的去研究过,且Vue的生命周期在面试中也算是比 ...

  3. Vue中的导航守卫(路由守卫)

    当做Vue-cli项目的时候感觉在路由跳转前做一些验证,比如登录验证,是网站中的普遍需求. 对此,vue-router 提供的 beforeEach可以方便地实现全局导航守卫(navigation-g ...

  4. vue中的导航守卫

    官方文档地址: 导航守卫:https://router.vuejs.org/zh-cn/advanced/navigation-guards.html 好的,重点内容 router.beforeEac ...

  5. Vue Router路由导航及传参方式

    路由导航及传参方式 一.两种导航方式 ①:声明式导航 <router-link :to="..."> ②:编程式导航 router.push(...) 二.编程式导航参 ...

  6. vue路由导航守卫及前置后置钩子函数参数详解

    首先构建一个测试demo如下图: 接着来探讨路由配置界面 import Vue from 'vue' import Router from 'vue-router' // import HelloWo ...

  7. Vue的路由动态重定向和导航守卫

    一.重定向 重定向也是通过 routes 配置来完成,下面例子是从 /a 重定向到 /b: const router = new VueRouter({ routes: [ { path: '/a', ...

  8. [Vue]导航守卫:全局的、单个路由独享的、组件级的

    正如其名,vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航.有多种机会植入路由导航过程中:全局的, 单个路由独享的, 或者组件级的. 记住参数或查询的改变并不会触发进入/离开的 ...

  9. VueJs(12)---vue-router(导航守卫,路由元信息)

    vue-router(导航守卫,路由元信息) 之前泄露两篇有关vue-router博客: VueJs(10)---vue-router(进阶1) VueJs(11)---vue-router(进阶2) ...

随机推荐

  1. 【Azure Developer】使用.Net Core解析JSON的笔记

    在C#中解析JSON的一些历史代码记录,分别记录针对各种情况的解析方式. DLL的引用 using Newtonsoft.Json; using Newtonsoft.Json.Linq; 需要使用的 ...

  2. retrofit和RxJava结合

    public class MainActivity extends AppCompatActivity { @SuppressLint("CheckResult") protect ...

  3. DTU连接不稳定有什么办法

    DTU是一种物联网的终端设备,在工业信息化的不断推进的大背景下,DTU的市场需求也越来越大,本身具有网络覆盖范围广.资费低.数据传输准确及时等众多优点.但在使用的过程中DTU会出现很多问题,比如DTU ...

  4. NB-IoT的HARQ过程是怎么样的

    NB-IoT的HARQ是一种将前向纠错(Forward Error Correction,FEC)编码和ARQ相结合而形成的技术.HARQ的基本原理是缓存没有正确接收到的数据,并且将重传数据和原始数据 ...

  5. Redis常用命令(3)——Hash

    HDEL 格式:HDEL key field [field ...] 作用:删除哈希表中的一个或多个域. 返回值:删除的域的个数. HEXISTS 格式:HEXISTS key field 作用:判断 ...

  6. 1.DRF初始化

    1.DRF框架的8个核心功能   1.认证(用户登录校验用户名密码或者token是否合法) 2.权限(根据不同的用户角色,可以操作不同的表) 3.限流(限制接口访问速度) 4.序列化(返回json) ...

  7. scrapy反反爬虫

    反反爬虫相关机制 Some websites implement certain measures to prevent bots from crawling them, with varying d ...

  8. dhcp、tftp、httpd、pxe安装CentOS6.9

    虚拟机网络设置 要xshell连接虚拟机注意设置VMware Network Adapter VMnet2在同一网段 1.利用光盘配置本地yum源 [root@ZYB ~]# mount -r /de ...

  9. leetcode73:minmum-window-substring

    题目描述 给出两个字符串S和T,要求在O(n)的时间复杂度内在S中找出最短的包含T中所有字符的子串. 例如: S ="ADOBECODEBANC" T ="ABC&quo ...

  10. 区分部分javascript的选择器

    下面代码简单介绍一下js的选择器 <ul> <li id="li1">1</li> <li class="li2"&g ...