Vue路由拦截器,vuerouter路由拦截
本文主要介绍如何通过vue路由实现登录拦截，帮助大家更好的理解和学习使用vue框架。感兴趣的朋友可以了解一下。
一.概述二。路由和导航卫士实现登录拦截。
目录
在项目开发中，每次切换路由或刷新页面时，都需要判断用户是否已经登录。前端可以判断，后端也会判断。我们最好在前端也这样做。
Vue-router提供了导航钩子：全局前导航钩子beforeEach和全局后导航钩子afterEach，在路由改变前后都会触发。因此，判断用户是否登录需要在beforeEach导航钩子中进行判断。
导航挂钩有3个参数：
1.to:要输入的目的路由对象；
2.from:当前导航即将离开的route对象；
3.next:调用这个方法后，可以进入下一个钩子函数(afterEach)。
Next()//直接转到to指示的路由
Next(false) //中断当前路线
Next(route) //跳转到指定的路由
Next(error) //跳错路线
一、概述
这里有一个空白的vue项目来演示。主要有两个页面，分别是主页和登录。
访问主页时，必须登录，否则会跳转到登录页面。
创建一个新的空白vue项目，并在src\components中创建Login.vue。
模板
这是登录页面/分区。
/模板
脚本
导出默认值{
名称：“登录”
}
/脚本
样式范围
/风格
修改src\router\index.js
从“vue”导入Vue
从“vue路由器”导入路由器
从“@/components/HelloWorld”导入HelloWorld
从“@/组件/登录”导入登录
Vue.use(路由器)
常量路由器=新路由器({
Mode: history ，//从url中删除#
路线：[
{
路径：“/login”，
名称：登录，
元：{
标题：“登录”，
RequiresAuth: false，//false表示不需要登录。
},
组件：登录
},
{
路径：“/”，
名称：“HelloWorld”，
元：{
标题：“主页”，
RequiresAuth: true，//true表示需要登录。
},
组件：HelloWorld
},
]
})
//路由拦截，确定是否需要登录。
router.beforeEach((收件人，发件人，下一个)={
if (to.meta.title) {
//确定是否有标题。
document . title=to . meta . title；
}
//console.log(title ，document.title)
//通过requiresAuth确定当前路径导航是否需要登录。
if(to . matched . some(record=record . meta . requires auth)){
let token=local storage . getitem( token )
//console.log(token ，token)
//如果需要登录权限，检查是否处于登录状态。
如果(！令牌){
下一个({
路径：“/login”，
查询：{ redirect: to.fullPath }
})
}否则{
下一个()
}
}否则{
Next() //确保调用Next()
}
})
导出默认路由器；
描述：
Meta被添加到每个路由中。requiresAuth字段用于标识是否需要登录。
在router.beforeEach中，判断令牌，当令牌为空时，跳转到登录页面。
访问主页
http://本地主机：8080
将跳转到
http://localhost:8080/登录？重定向=/
效果如下：
打开F12，进入控制台，手动编写令牌
localStorage.setItem(token ， 12345678910 )
效果如下：
再次访问首页，就可以正常访问了。
打开应用程序，删除本地存储中的值，右键单击并单击清除。
刷新页面，您将跳转到登录页面。
怎么样，是不是很简单？
以上是vue路由实现登录拦截的详细内容。更多关于vue登录拦截的信息，请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。