标签：十五篇 vue next 守卫 token 跳转 router 导航 路由

好家伙，考完期末考了.

恢复博客更新

 

1.什么是导航守卫？

“导航”表示路由正在发生变化

设置导航，就在切换过程中进行限制

 

”守卫“就好理解了

盯着你，不然你乱跑

 

所以我们大概可以知道，

这是一个控制路由访问权限的东西

 

 

2.导航守卫有什么用？

导航守卫可以控制路由的访问权限

 

 

 

比如说，

有人来到我的网页了，

我要求它登录后才能继续一系列的操作，

这个时候我可以设置一个导航守卫来强制

游客跳转到登录界面

 

 

 

2.全局前置守卫

 

每次发生路由的导航跳转时，都会触发全局前置守卫。

因此，在全局守卫中，程序员可以对每个路由进行访问权限的控制

 

 

2.1.前置守卫的设置

//为router实例对象,声明去哪聚前置导航守卫
//只要发生了路由的跳转,必然会触发该函数
router.beforeEach(function(to,from,next){
  //to 是将要访问的路由的信息对象
  //from 是将要离开的路由的信息对象
  //next 是一个函数,调用next()表示放行,允许这次路由导航,守卫放行了
  next()
})

(beforexxx,有点生命周期的感觉了)

 

 

2.2.三个参数的作用

function(to,from,next)有三个参数

to 是将要访问的路由的信息对象

from 是将要离开的路由的信息对象

next 是一个函数,调用next()表示放行,允许这次路由导航,守卫放行了

 

 

2.3.next()的三种调用方式

第一种情况:当前用户拥有后台主页的访问权限，直接放行：next()

第二种情况:当前用户没有后台主页的访问权限，强制其跳转到登录页面：next('/login')

第三种情况:当前用户没有后台主页的访问权限，不允许跳转到后台主页：next(false)

 

 

2.4.关于token

Token的定义：Token是服务端生成的一串字符串，以作客户端进行请求的一个令牌， 当第一次登录后，服务器生成一个Token便将此Token返回给客户端， 以后客户端只需带上这个Token前来请求数据即可，无需再次带上用户名和密码。  

 

2.5.配置路由守卫

来分析一波这玩意要怎么配置  

1．要拿到用户将要访问的 hash 地址

2．判断 hash 地址是否等于／main。

2.1. 如果等于／main，证明需要登录之后，才能访问成功

2.2. 如果不等于／main，则不需要登录，直接放行 next（）

3. 如果访问的地址是／main。则需要读取 localStorage 中的 token 值

3.1 如果有 token，则放行

3.2 如果没有 token，则强制跳转到／login 登录页

 

于是,

代码如下:

router.beforeEach(function(to,from,next){
  //to 是将要访问的路由的信息对象
  //from 是将要离开的路由的信息对象
  //next 是一个函数,调用next()表示放行,允许这次路由导航,守卫放行了
  if(to.path ==='/main'){
    const token =localStorage.getItem('token')
  //简单理解一下token是一个用来存储用户信息的加密字符串
    if(token){
      next()
    }
    else{
      //没有登录,强制跳转
      next('/login')
    }
  }
  else{
     next()
  }
})

大概就这样了.

 

 

That's all

标签：十五篇,vue,next,守卫,token,跳转,router,导航,路由
来源： https://www.cnblogs.com/FatTiger4399/p/16425413.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。