【VUE】5.路由导航守卫
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.路由导航守卫的更多相关文章
- vue之路由导航守卫-全局前置守卫
一.使用方式 全局前置守卫用于在路由配置生效之前进行一些动作,可以使用 router.beforeEach 注册一个全局前置守卫: const router = new VueRouter({ ... ...
- Vue的钩子函数[路由导航守卫、keep-alive、生命周期钩子]
前言 说到Vue的钩子函数,可能很多人只停留在一些很简单常用的钩子(created,mounted),而且对于里面的区别,什么时候该用什么钩子,并没有仔细的去研究过,且Vue的生命周期在面试中也算是比 ...
- Vue中的导航守卫(路由守卫)
当做Vue-cli项目的时候感觉在路由跳转前做一些验证,比如登录验证,是网站中的普遍需求. 对此,vue-router 提供的 beforeEach可以方便地实现全局导航守卫(navigation-g ...
- vue中的导航守卫
官方文档地址: 导航守卫:https://router.vuejs.org/zh-cn/advanced/navigation-guards.html 好的,重点内容 router.beforeEac ...
- Vue Router路由导航及传参方式
路由导航及传参方式 一.两种导航方式 ①:声明式导航 <router-link :to="..."> ②:编程式导航 router.push(...) 二.编程式导航参 ...
- vue路由导航守卫及前置后置钩子函数参数详解
首先构建一个测试demo如下图: 接着来探讨路由配置界面 import Vue from 'vue' import Router from 'vue-router' // import HelloWo ...
- Vue的路由动态重定向和导航守卫
一.重定向 重定向也是通过 routes 配置来完成,下面例子是从 /a 重定向到 /b: const router = new VueRouter({ routes: [ { path: '/a', ...
- [Vue]导航守卫:全局的、单个路由独享的、组件级的
正如其名,vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航.有多种机会植入路由导航过程中:全局的, 单个路由独享的, 或者组件级的. 记住参数或查询的改变并不会触发进入/离开的 ...
- VueJs(12)---vue-router(导航守卫,路由元信息)
vue-router(导航守卫,路由元信息) 之前泄露两篇有关vue-router博客: VueJs(10)---vue-router(进阶1) VueJs(11)---vue-router(进阶2) ...
随机推荐
- 【Azure Developer】使用.Net Core解析JSON的笔记
在C#中解析JSON的一些历史代码记录,分别记录针对各种情况的解析方式. DLL的引用 using Newtonsoft.Json; using Newtonsoft.Json.Linq; 需要使用的 ...
- retrofit和RxJava结合
public class MainActivity extends AppCompatActivity { @SuppressLint("CheckResult") protect ...
- DTU连接不稳定有什么办法
DTU是一种物联网的终端设备,在工业信息化的不断推进的大背景下,DTU的市场需求也越来越大,本身具有网络覆盖范围广.资费低.数据传输准确及时等众多优点.但在使用的过程中DTU会出现很多问题,比如DTU ...
- NB-IoT的HARQ过程是怎么样的
NB-IoT的HARQ是一种将前向纠错(Forward Error Correction,FEC)编码和ARQ相结合而形成的技术.HARQ的基本原理是缓存没有正确接收到的数据,并且将重传数据和原始数据 ...
- Redis常用命令(3)——Hash
HDEL 格式:HDEL key field [field ...] 作用:删除哈希表中的一个或多个域. 返回值:删除的域的个数. HEXISTS 格式:HEXISTS key field 作用:判断 ...
- 1.DRF初始化
1.DRF框架的8个核心功能 1.认证(用户登录校验用户名密码或者token是否合法) 2.权限(根据不同的用户角色,可以操作不同的表) 3.限流(限制接口访问速度) 4.序列化(返回json) ...
- scrapy反反爬虫
反反爬虫相关机制 Some websites implement certain measures to prevent bots from crawling them, with varying d ...
- dhcp、tftp、httpd、pxe安装CentOS6.9
虚拟机网络设置 要xshell连接虚拟机注意设置VMware Network Adapter VMnet2在同一网段 1.利用光盘配置本地yum源 [root@ZYB ~]# mount -r /de ...
- leetcode73:minmum-window-substring
题目描述 给出两个字符串S和T,要求在O(n)的时间复杂度内在S中找出最短的包含T中所有字符的子串. 例如: S ="ADOBECODEBANC" T ="ABC&quo ...
- 区分部分javascript的选择器
下面代码简单介绍一下js的选择器 <ul> <li id="li1">1</li> <li class="li2"&g ...