vue路由守卫导航栏权限配置,vue-router导航守卫

　　在之前的Vue研究中，用户登录模块的功能是通过路由、导航、警卫控制实现的。本文基于Vue2.x在此，实现过程有记录和总结，有兴趣的可以看看。

前言

　　在之前的Vue学习中，用户登录模块的功能是通过控制路线导航卫士来实现的。现在再做项目的时候，需要通过Vue配置路线导航卫士来实现同样的功能。这里记录和总结实现过程(本文基于Vue2.x)。

　　提示：以下是本文的主要内容，以下案例可供参考。

一、配置路由导航守卫

1. 全局导航守卫

　　如果项目中只有背景，在Vue中配置全局导航卫士。设置好全局路由导航守护后，就开始工程，用户没有登录的话只能跳转到登录页面，不允许跳转到其它界面。

　　在安装vue-router dependency时自动生成的router - index.js文件夹中添加以下代码

　　router.beforeEach((收件人，发件人，下一个)={

　　//如果访问登录界面，直接释放。

　　if (to.path===/login )返回next()

　　//获取用户页面的令牌信息

　　let token=window . session storage . getitem( token )

　　//如果令牌数据为空，跳转到指定路径

　　如果(！token)返回next(/login )

　　下一个()

　　})

　　参数解释：

　　收件人：要跳转到哪个界面

　　出发地：从哪个界面进行跳转

　　下一个：代表next()函数，功能为放行

2. 局部导航守卫

　　在项目开发中，还有一种情况是前台和后台要同时开发，但此时路由导航卫士无法进行全局配置，因为前台界面要展示给用户，即使用户在没有登录的情况下也能够进行访问，所以路由导航卫士只会拦截后台路径。

　　路由和导航保护仍然配置在index.js文件夹下，但这次是为单个组件配置的。

　　例如，在我的项目中，欢迎组件是一个背景组件。现在，如果要配置此组件的路由和导航防护，必须首先将全局配置的beforeEach更改为beforeEnter，以配置单组件导航防护。

　　作者是之前在登录组件中配置的路由导航卫士，结果没有效果。写在这里，以后不要再犯这样的错误。将以下代码添加到组件中：

　　//定义路线导航保护

　　之前输入(到，从，下一个){

　　//获取用户页面的令牌信息

　　let token=window . session storage . getitem( token )

　　//如果令牌数据为空，跳转到指定路径

　　如果(！token)返回next(/login )

　　下一个()

　　}

　　局部导航卫的参数功能与全局配置相同，只是beforeEach被beforeEnter代替，此处不再赘述。

二、用户登录

　　这里只展示前台代码，后台代码的编写方式每个人都有自己的风格和写法，这里就不展示了。

1. axios配置

　　为了避免项目中回调到hell的问题，这里我导入了axios插件，在main.js文件中提前配置了axios。

　　/*导入axios包*/

　　从“axios”导入axios

　　/*设置axios的请求根目录*/

　　axios . defaults . base URL= http://localhost:8089/

　　/*将全局对象添加到vue对象后发送ajax请求时使用$http对象*/

　　Vue.prototype.$http=axios

　　由于main.js文件中的全局配置，$http表示组件中的set请求根目录，即http://localhost:8089/

2. 用户登录代码

　　//单击登录按钮时向后台发送数据

　　这个。$ refs . loginformref . validate(async valid={

　　如果(！有效)返回

　　const {data: result}=等待此消息。$ http . post(/用户/登录，this.loginForm)

　　//如果返回的参数中的状态码不是200，则表示登录失败。

　　if(结果.状态！==200)还这个。$ message.error(“用户登录失败”)

　　这个。$message.success(用户成功登录)

　　//成功登录后，将令牌信息保存到会话中。

　　window . session storage . setitem( token ，result.data)

　　//跳转到后台管理系统的主页

　　这个。$router.push(/welcome )

　　})

三、用户退出

　　当用户注销时，只需要删除会话中的令牌数据，然后跳转到其他页面。这时路由导航守护再次生效，所以在前台就可以实现，不需要连接后端。

1. 实现代码

　　注销(){

　　//1.删除进程中的数据

　　window.sessionStorage.clear()

　　//2.用户访问登录页面

　　这个。$router.push(/login )

　　}

总结

　　以上是在Vue中配置路由导航卫士后，用户登录和注销的功能。实现中有两种情况，即登录后才能进入界面和用户即使不登录也可以浏览前台。第一种情况只需要全局配置，第二种情况需要在组件中配置单组件路由导航，登录后跳转。

　　就是这样。本文介绍Vue2.x配置路由和导航卫士实现用户登录和注销。有关Vue路由卫士登录和注销的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。

目录

前言