Vue路由守卫实现无登录只跳转到登录页面

在实际的项目中，有一些页面是需要登录后才可以浏览，有一些功能需要登录权限。如果没限制用户未登录也可以通过url直接浏览，这需要我们路由上做一些限制。

在登录成功后，后端会返回一个唯一token，我们可以把这个token通过localStorage存起来
localStorage.setItem(‘token’, token);
在router/index.js下

router.beforeEach((to, from, next) => {let token = localStorage.getItem('token');//获取tokenif (token || to.path === '/login') {//有token或者在login页面下通行next();} else {alert('无权访问');next('/login');}

Vue路由守卫实现无登录只跳转到登录页面相关推荐

VUE路由守卫_前端实现权限验证
VUE路由守卫_权限验证引言: 本文在利用SpringBoot和Vue实现前后端分离一文的基础上追加的路由守卫:未登录时会限制访问某些页面(前台控制),与之前的Shiro不同: 文章目录 VUE路由 ...
vue路由守卫死循环及next原理解释
在使用vue路由守卫的beforeEach方法时可能会出现无限递归,也就是死循环的问题,根本原因在于next()方法在不合适的地方错误调用所致,先来看一下官方对next()方法的解释: befor ...
Vue路由守卫（导航守卫）及使用场景
目录前言一.路由守卫是什么? 二.路由守卫全解析先来看一下钩子函数执行后输出的顺序吧 1.全局路由守卫 2.组件路由守卫 3.路由独享守卫单独介绍一下路由守卫钩子三个参数前言最近在学习vu ...
vue路由守卫中next方法的理解
vue路由守卫中next方法的理解在网上看到了一篇通俗易懂的文章,此文章出处在这里我用通俗点的说法解释上next(),next(false),next('/'),next(error),希望通过这 ...
Vue中使用axios的响应拦截器处理请求失败的情况（处理token过期问题）以及登录成功跳转回原来页面问题
参考axios官方文档 // 响应拦截器 // Add a response interceptor request.interceptors.response.use(// 在2xx范围内的任何状态 ...
reactrouter4路由钩子_react router @4 和 vue路由详解(八)vue路由守卫
13.vue路由守卫 a.beforeEach 全局守卫 (每个路由调用前都会触发,根据from和to来判断是哪个路由触发) const router = new VueRouter({ ... }) ...
当使用this.$router.back()或者this.$router.go(-1)返回上一页时，搭配组件内路由守卫，屏幕闪烁和跳转页面错误问题
当使用this.$router.back()或者this.$router.go(-1)返回上一页时,搭配组件内路由守卫,屏幕闪烁和跳转页面错误问题问题描述:项目有这个需求,当页面的输入框内容填完之后 ...
php拦截登录页面跳转页面,PHP未登录自动跳转到登录页面
PHP未登录自动跳转到登录页面下面一段代码给大家分享php未登录自动跳转到登录页面,具体代码如下所示: namespace Home\Controller; use Think\Controller ...
mysql的免密码登录_mysql免密码登录(mysql跳过密码登录)
mysql免密码登录(mysql跳过密码登录) 2020-05-15 13:07:13 共10个回答 1.用系统管理员登陆windows系统.2.停止MySQL的服务.3.运行cmd进入dos命令窗口 ...

Vue路由守卫实现无登录只跳转到登录页面

Vue路由守卫实现无登录只跳转到登录页面相关推荐

最新文章

热门文章