Vue之beforeEach非登录不能访问的实现（代码亲测）

这篇文章主要介绍了Vue之beforeEach非登录不能访问的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

后台的php请求就是接收这两个参数

login.vue

   提交

router

 { path: '/', name: 'HelloWorld', component: HelloWorld, meta:{requireAuth:true} }, 

main.js

 router.beforeEach((to, from, next) => { console.log(to); console.log(from); console.log( sessionStorage.getItem('token')) if (to.meta.requireAuth) { // 判断该路由是否需要登录权限 if(sessionStorage.getItem('token')){ //判断sessionStorage是否存在token alert("已经登录了") next(); }else{ //防止死循环 alert("暂时未登录") if (to.path === '/login') { next(); return }else{ next({ path: '/login', }); } } } else { next(); } /*如果本地 存在 token 则 不允许直接跳转到 登录页面*/ if(to.fullPath == "/login"){ if(localStorage.getItem('token')){ next({ path:from.fullPath }); }else { next(); } } }); 

注意一定要在router实例前使用

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。

以上就是Vue之beforeEach非登录不能访问的实现（代码亲测）的详细内容，更多请关注本站其它相关文章！