Vue声明式导航与编程式导航及导航守卫和axios拦截器全面详细讲解

目录
  • 一、声明式导航&编程式导航
  • 二、导航守卫
  • 三、axios拦截器

一、声明式导航&编程式导航

1. 声明式导航:以超链接方式实现的页面跳转,就是声明式导航

< a href=‘url’> 链接文本或图像 < /a >

< router-link to=‘url’ > 链接文本或图像 < /router-link >

2. 编程式导航:通过javascript提供的api方法实现页面的跳转,就是编程式导航

location.href = ‘url’

location.go(number)

location.replace(‘url’)

3. vue-router中提供的编程式导航的API

​ (1)this.$router.push(‘url’):将‘url’添加到路由表中,增加了一条路由记录

<template>
<div>
 <h3>Home 组件</h3>
 <button @click="gotoMovie">跳转到 Movie 页面</button>
</div>
</template>
<script>
export default {
  name: "",
  methods:{
    gotoMovie(){
      this.$router.push('/movie/1')
    }
  }
}
</script>

​ (2)this.$router.replace(‘url’):跳转到url中,并替换掉当前的历史记录

​ push 和 replace 的区别:

​ ​ 1)push 会增加一条历史记录

​ ​ 2)replace 不会增加历史记录,而是替换掉当前的历史记录

​ (3)this.$router.go(number):参数是一个数值,页面跳转到指定的位置,可以在浏览历史中前进和后退。

​ ​ (4)this.$router.go()的简化写法

​ ​ ​ 1)this.$router.back():在历史记录中,后退到上一个页面

​ ​ ​ 2)this.$router.forword():在历史记录中,前进到下一个页面

<template>
<div>
 <h3>Home 组件</h3>
 <button @click="goBack">退回上一页</button>
</div>
</template>
<script>
export default {
  props:['id'],
  methods:{
    goBack(){
      this.$router.go(-1)
    }
  }
}
</script>

二、导航守卫

1. 用途:在页面导航过程中实现重定向、取消路由、权限验证等业务。

​ 导航守卫分为三类:全局守卫、路由独享的守卫、组件内守卫,可以用于路由导航过程中的不同阶段。

​ 每一个导航守卫都有三个参数:to、from 和 next (router、afterEach 除外)

​ 2. 分类:全局守卫、组件内部守卫、路由独享的守卫

​ 3. 全局守卫

​ ​ (1)全局前置守卫:每次发生路由的导航跳转时,都会触发全局前置守卫。因此,在全局前置守卫中,程序员可以对每个路由进行访问权限的控制。使用的router.beforeEach(to,from,next){ }来注册。当一个导航触发时,全局前置守卫按照路由创建的顺序调用。

  • to:将要访问的路由的信息对象
  • from:将要离开的路由的信息对象
  • ​next:是一个函数,调用next()表示当前路由已经放行

​ ​ (2)next调用的情况

​ ​ 1)用户拥有了权限,直接放行:next()

​ ​ 2)用户没有权限,强制跳转到指定的页面:next(‘/login’)

​ ​ 3)用户没有权限,不允许访问:next(false)

​ ​ 4. 全局前置守卫的使用

​ ​ ​ (1)创建Login.vue组件

​ ​ ​ (2)在路由文件router / index.js中注册全局的前置守卫

//App.vue
<template>
  <div>
    <h2>{{ info }}</h2>
    <div>
      <label>
        账号:<input type="text" v-model.trim="userName" />
      </label>
      <br /><br />
      <label>
        密码:<input type="password" v-model.trim="passWord" />
      </label>
      <br /><br />
      <button type="button" @click="login">登录</button>
    </div>
  </div>
</template>
<script type="text/javascript">
import $http from '../axios/index'
export default {
  name: "Login",
  data() {
    return {
      info: '',
      userName: '',
      passWord: '',
    }
  },
  methods: {
    login() {
      //   //对登陆信息进行验证(实际中在此处进行ajax的请求)
      //   if('lisi' === this.userName && '1234' === this.passWord){
      //     sessionStorage.setItem('isAuth',true) //在页面缓存中保存isAuth,isAuth=true表示用户已登录
      //     this.info = ''

      //     //判断当前路由对象中参数是否有参数
      //     if(this.$route.query.redirect){
      //       let redirect =this.$route.query.redirect
      //       this.$router.replace(redirect)//跳转到指定页面
      //     }
      //     else{
      //       this.$router.replace('/')//若路由对象中没有redirect,则直接跳转到默认的首页
      //     }
      //   }else{//非法用户
      //   sessionStorage.setItem('isAuth',false)
      //   this.userName = ''
      //   this.passWord = ''
      //   this.info = '用户名或密码错误'
      // }
      $http.post('/test/login', {
        userName: this.userName,
        passWord: this.passWord
      }).then(res => {
        if (res.data.code == 200) {
          sessionStorage.setItem('auth', res.data.tokenInfo)
          this.info = ''
          //判断当前路由对象中参数是否有参数
          if (this.$route.query.redirect) {
            let redirect = this.$route.query.redirect
            this.$router.replace(redirect)//跳转到指定页面
          }
          else {
            this.$router.replace('/')//若路由对象中没有redirect,则直接跳转到默认的首页
          }
        } else {
          sessionStorage.setItem('auth', '')
          this.userName = ''
          this.passWord = ''
          this.info = '用户名或密码错误'
        }
      })
    }
  }
}
</script>
<style scoped>
</style>
//router/insex.js
//注册全局前置导航守卫
router.beforeEach((to, from, next) => {
    //判断目标路由是否是/login,如果是,则直接调用next()方法
    if (to.path == '/login') {
        next()
    } else {//否则判断用户是否已经登录,注意这里是字符串判断
        if (sessionStorage.getItem('auth')!='' && sessionStorage.getItem('auth'!=null)) {
            next()
        } else {//如果用户访问的是受保护的资源,且没有登录,则跳转到登录页面
            //并将当前路由的完整路径作为查询参数传递给Login组件,以便登录成功后返回先前的页面
            next({//强制跳转到登录页面
                path: '/login',
                query:{ redirect:to.fullPath}
            }
            )
        }
    }
})

三、axios拦截器

1. axios模块的作用:是对基于http请求的封装。在浏览器对异步请求对象XMLHttpRequest进行封装

2. 拦截器

​ (1)请求拦截器:对客户端发起的请求进行统一的前期处理(token、时间戳、cookie等)

​ (2)响应拦截器:对服务器端响应给客户端的数据统一进行处理之后再发给客户端

3. 使用方法

//前端/App.vue
<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
  <br/>  <br/>
  <button @click="login">登录</button>
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  <button @click="test">测试拦截器</button>
  </div>
</template>
<script>
import $http from './axios/index'
export default {
  name: 'App',
  methods:{
    login(){
      $http.post('/users/login',{
        userName:'lisi',
        userPwd:'12345'
      }).then(res=>{
        if(res.data.code == 200){
          sessionStorage.setItem('Auth',res.data.mytoken)
        }
      }).catch(err=>{
        console.log(err);
      })
    },
    test(){
      $http.post('/users/test').then(res=>{
        console.log(res.data);
      }).catch(err=>{
        console.log(err);
      })
    }
  }
}
</script>
//前端/index.js
import axios from "axios";
//1. 创建axios的实例,配置基础路径
const axiosInstance = axios.create({
    baseURL: 'http://localhost:8089',
    timeout: 5000
})
//2. 定义请求拦截器:给所有请求都带上token
axiosInstance.interceptors.request.use((req) => {
    let token = sessionStorage.getItem('Auth') //获取页面存储中的token信息
    if (token) { //若token存在
        req.headers['Auth'] = token
    }
    return req;
}, (err) => {
    return Promise.reject(err)
})
// 3.响应拦截器:对服务器响应给客户端的数据进行统一的处理
axiosInstance.interceptors.response.use((res) => {
    //1.对响应数据进行处理
    let result = res.data
    let code = result.code
    if (code == 200) {
        return result
    } else {
        return Promise.reject(result)
    }
}, (err) => {
    return Promise.reject(err)
})
export default axiosInstance
//后台/usrs.js
var express = require('express');
var router = express.Router();
var jwt = require('jsonwebtoken')
/* http://localhost:8089/users/login */
router.post('/login', (req, res)=>{
  //1.接收客户的请求数据
  let user = {
    name:req.body.userName,
    pwd:req.body.userPwd
  }
  //2.定义密钥
  let temp = 'baihualin'
  //3.生成token
  let token = jwt.sign(user,temp)
  res.json({
    code:200,
    mytoken:token
  })
} );
/* http://localhost:8089/users/login */
router.post('/test',(req,res)=>{
  //输出请求头信息
  console.log(req,headers)
  let arr = [
    {
      bookId:1001,
      bookName:'Vue2从入门到精通',
      publish:'清华大学出版社'
    },
    {
      bookId:1002,
      bookName:'Html从入门到放弃',
      publish:'清华大学出版社'
    },
    {
      bookId:1003,
      bookName:'Css都是浮云',
      publish:'清华大学出版社'
    },
  ]
  res.json(arr)
})
module.exports = router;

到此这篇关于Vue声明式导航与编程式导航及导航守卫和axios拦截器全面详细讲解的文章就介绍到这了,更多相关Vue声明式导航内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • 快速理解Vue路由导航守卫

    目录 一.全局守卫 1.全局前置守卫 2.全局解析守卫 3.全局后置钩子 三.路由独享的守卫 四.组件内的守卫 五.一个完整的导航解析流程 概念: "导航"表示路由正在发生变化 vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航.有多种机会植入路由导航过程 中:全局的, 单个路由独享的, 或者组件级的. 导航守卫:包括全局导航守卫和局部导航守卫 一.全局守卫 vue-router全局有三个守卫 router.beforeEach :全局前置守卫,进入路由之前 ro

  • 关于Vue中的全局导航守卫(beforeEach、afterEach)

    目录 全局导航守卫(beforeEach.afterEach) 导航钩子有3个参数 beforeEach afterEach 全局导航守卫是干什么的? 1.在router中的index.js文件里引入vue-router 2.创建路由实例 3.挂载全局导航守卫 全局导航守卫(beforeEach.afterEach) 在项目开发中每一次路由的切换或者页面的刷新都需要判断用户是否已经登录,前端可以判断,后端也会进行判断的,我们前端最好也进行判断. vue-router 提供了导航钩子:全局前置导航

  • Vue Router4路由导航守卫实例全面解析

    目录 前言 一.什么是导航守卫 二.全局前置守卫 可选的第三个参数 next 三.全局解析守卫 四.全局后置钩子 五.路由独享的守卫 六.组件内的守卫 可用的配置 API 使用组合 API 七.完整的导航解析流程 前言 在写Vue项目的时候,少不了使用路由vue-router,而路由守卫是vue-router中一个非常重要的概念,也是非常重要的技巧.它能够很好的帮助开发者“监视”每一个跳转的路由. 一.什么是导航守卫 正如其名,vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫

  • vue-router的导航守卫使用最新讲解

    目录 前言 vue-router中编程式导航API 导航守卫 全局守卫 独享路由守卫 组件路由守卫 前言 在浏览器中点击链接实现导航的方式,叫做声明式导航.例如:普通网页中点击<a>链接.vue项目中点击<router-link>都属于声明式导航. 在浏览器中调用API方法实现的导航方式,叫做编程式导航.例如:普通网页中调用loaction.href跳转到新页面的方式,属于编程式导航. vue-router中编程式导航API 编程式路由导航作用就是不借助<router-lin

  • vue中的导航守卫使用及说明

    目录 导航守卫 全局守卫 独享守卫 组件内守卫 vue导航守卫有哪些 路由的钩子函数有六个 全局路由钩子函数 路由内的钩子函数 组件内的钩子函数 总结 导航守卫 作用:对路由进行权限控制 分类:全局守卫.独享守卫.组件内守卫 全局守卫 const router = new VueRouter({ routes: [ { path: '/home', component: Home, meta: { isAuth: false }, // 不需要进行权限控制 }, { path: '/user',

  • Vue声明式导航与编程式导航及导航守卫和axios拦截器全面详细讲解

    目录 一.声明式导航&编程式导航 二.导航守卫 三.axios拦截器 一.声明式导航&编程式导航 1. 声明式导航:以超链接方式实现的页面跳转,就是声明式导航 < a href=‘url’> 链接文本或图像 < /a > < router-link to=‘url’ > 链接文本或图像 < /router-link > 2. 编程式导航:通过javascript提供的api方法实现页面的跳转,就是编程式导航 location.href = ‘

  • vue 导航守卫和axios拦截器有哪些区别

    在Vue项目中,有两种用户登录状态判断并处理的情况,分别为:导航守卫和axios拦截器. 一.什么是导航守卫? vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航.(在路由跳转时触发) 我们主要介绍的是可以验证用户登录状态的全局前置守卫,当一个导航触发时,全局前置守卫按照创建顺序调用.守卫是异步解析执行,此时导航在所有守卫 resolve 完之前一直处于等待中. const router = new VueRouter({ ... })   router.beforeEac

  • React路由规则定义与声明式导航及编程式导航分别介绍

    目录 1. 路由使用 2. 声明式导航 3. 编程式导航 1. 路由使用 安装路由模块: 路由模块不是react自带模块,需要安装第3方模块: yarn add react-router-dom@5 路由相关组件: 路由模式组件:包裹整个应用,一个React应用只需要使用一次 HashRouter: 使用URL的哈希值实现 (localhost:3000/#/first) BrowserRouter:使用H5的history API实现(localhost3000/first) 导航组件:用于指

  • 详解给Vue2路由导航钩子和axios拦截器做个封装

    1.写在前面 最近在学习Vue2,遇到有些页面请求数据需要用户登录权限.服务器响应不符预期的问题,但是总不能每个页面都做单独处理吧,于是想到axios提供了拦截器这个好东西,再于是就出现了本文. 2.具体需求 用户鉴权与重定向:使用Vue提供的路由导航钩子 请求数据序列化:使用axios提供的请求拦截器 接口报错信息处理:使用axios提供的响应拦截器 3.简单实现 3.1 路由导航钩子层面鉴权与重定向的封装 路由导航钩子所有配置均在router/index.js,这里是部分代码 import

  • Vue 前端实现登陆拦截及axios 拦截器的使用

    该项目是利用了Github 提供的personal token作为登录token,通过token访问你的Repository List.通过这个项目学习如何实现一个前端项目中所需要的 登录及拦截.登出.token失效的拦截及对应 axios 拦截器的使用. 准备 你需要先生成自己的 Github Personal Token( 生成Token). Token 生成后 访问 Demo,即可查看你的Repository List. 项目结构 ├── README.md ├── dist // 打包构

  • Vue基于vuex、axios拦截器实现loading效果及axios的安装配置

    准备 利用vue-cli脚手架创建项目 进入项目安装vuex.axios(npm install vuex,npm install axios) axios配置 项目中安装axios模块(npm install axios)完成后,进行以下配置: main.js //引入axios import Axios from 'axios' //修改原型链,全局使用axios,这样之后可在每个组件的methods中调用$axios命令完成数据请求 Vue.prototype.$axios=Axios l

  • 详解Vue中使用Axios拦截器

    需求是拦截前端的网络请求和相应. 废话不多说,直接上干货. 我用的是vue-cli3所以这个config文件是我自己创建的. 先介绍env.js //根据不同的环境更改不同的baseUrl let baseUrl = ''; //开发环境下 if (process.env.NODE_ENV == 'development') { baseUrl = ''; } else if (process.env.NODE_ENV == 'production') { baseUrl = '生产地址'; }

  • Vue中axios拦截器如何单独配置token

    在了解到cookie.session.token的作用后学习token的使用 cookie cookie是随着url将参数发送到后台,安全性最低,并且大小受限,不超过4kb左右,它的数据保存在客户端 session session数据保存在服务端,在内存中开辟空间存储数据,session文件名即sessionID保存在cookie内,随cookie传送到服务端后在服务端匹配session文件 token token是服务端的一种算法,如果登录成功,服务端就会根据算法生成一个字符串,将字符串传递回

  • vue下axios拦截器token刷新机制的实例代码

    //创建http.js文件,以下是具体代码: //引入安装的axios插件 import axios from 'axios' import router from '@/router'; import Vue from 'vue' const qs = require("qs"); let _this = new Vue(); let isLock = false; let refreshSubscribers = []; //判断token是否过期 function isToken

  • vue+axios 拦截器实现统一token的案例

    需求 要想统一处理所有http请求和响应,就得用上 axios 的拦截器.通过配置 http response inteceptor ,当后端接口返回 401 Unauthorized(未授权) ,让用户重新登录. 通过这个项目学习如何实现一个前端项目中所需要的 登录及拦截.登出.token失效的拦截及对应 axios 拦截器的使用. 代码如下: const instance = axios.create({ baseURL: 'http://www.laravel5.5.com/api/',

随机推荐