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


Posted in Javascript onJuly 18, 2019

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

login.vue

<template>
<div class=''>
  <input type="text" v-model="name" />
  <input type="password" v-model="password" />
  <button type="primary" @click="submitForm"><router-link :to="{path:'/'}">提交</router-link></button>
</div>
</template>

<script>
import axios from 'axios';
 export default {
  data(){
    return{
    name:'',
    password:'',
    }
  },
  methods:{
  submitForm:function(){
  var params = new URLSearchParams();
  params.append('name', this.name);
  params.append('password',this.password);
    axios({
    method: 'post',
    url: '/api/bbb.php',
    data:params
    }).then((resp)=>{
      sessionStorage.setItem('token',resp.status)// localStorage
      //以key value的形式将值存放到sessionStorage中。
      console.log(resp);
      }).catch((error)=>{
        console.log(error);
 })
   }
  }
 }
</script>

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实例前使用

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js和as的稳定传值问题解决
Jul 14 Javascript
原生javascript获取元素样式
Dec 31 Javascript
js动态切换图片的方法
Jan 20 Javascript
javascript中动态函数用法实例分析
May 14 Javascript
详解JavaScript表单验证(E-mail 验证)
Mar 31 Javascript
javascript创建对象的几种模式介绍
May 06 Javascript
Mac下使用charles遇到的问题以及解决办法
Jan 10 Javascript
Vuejs 用$emit与$on来进行兄弟组件之间的数据传输通信
Feb 23 Javascript
利用JS实现scroll自定义滚动效果详解
Oct 17 Javascript
利用Webpack实现小程序多项目管理的方法
Feb 25 Javascript
如何使用RoughViz可视化Vue.js中的草绘图表
Jan 30 Vue.js
前端canvas中物体边框和控制点的实现示例
Aug 05 Javascript
jquery实现下载图片功能
Jul 18 #jQuery
jQuery实现图片下载代码
Jul 18 #jQuery
使用react context 实现vue插槽slot功能
Jul 18 #Javascript
jquery图片预览插件实现方法详解
Jul 18 #jQuery
vue使用自定义指令实现拖拽
Jan 29 #Javascript
对TypeScript库进行单元测试的方法
Jul 18 #Javascript
基于JS实现数字动态变化显示效果附源码
Jul 18 #Javascript
You might like
PHP网上调查系统
2006/10/09 PHP
PHP IPV6正则表达式验证代码
2010/02/16 PHP
php判断是否为json格式的方法
2014/03/04 PHP
PHP调用接口用post方法传送json数据的实例
2018/05/31 PHP
Thinkphp 在api开发中异常返回依然是html的解决方式
2019/10/16 PHP
完整显示当前日期和时间的JS代码
2007/09/17 Javascript
JS 获取span标签中的值的代码 支持ie与firefox
2009/08/24 Javascript
jquery遍历筛选数组的几种方法和遍历解析json对象
2013/12/13 Javascript
jquery插件开发之实现jquery手风琴功能分享
2014/03/10 Javascript
SWFUpload多文件上传及文件个数限制的方法
2016/05/31 Javascript
Vuex模块化实现待办事项的状态管理
2017/03/15 Javascript
bootstrap fileinput组件整合Springmvc上传图片到本地磁盘
2017/05/11 Javascript
JS中call和apply函数用法实例分析
2018/06/20 Javascript
json前后端数据交互相关代码
2018/09/19 Javascript
详解滑动穿透(锁body)终极探索
2019/04/16 Javascript
Vue中Table组件行内右键菜单实现方法(基于 vue + AntDesign)
2019/11/21 Javascript
微信小程序实现签字功能
2019/12/23 Javascript
如何在 ant 的table中实现图片的渲染操作
2020/10/28 Javascript
[02:00]最后,我终于出了辉耀
2018/03/27 DOTA
Python3使用PyQt5制作简单的画板/手写板实例
2017/10/19 Python
Pycharm设置界面全黑的方法
2018/05/23 Python
django API 中接口的互相调用实例
2020/04/01 Python
python中列表的含义及用法
2020/05/26 Python
Python如何将将模块分割成多个文件
2020/08/04 Python
什么是方法的重载
2013/06/24 面试题
管理心得体会
2013/12/28 职场文书
学习十八大精神心得体会
2013/12/31 职场文书
生物制药自我鉴定
2014/01/25 职场文书
小学生家长评语大全
2014/02/10 职场文书
集体生日活动方案
2014/08/18 职场文书
英语课前三分钟演讲稿
2014/08/19 职场文书
面试感谢信范文
2015/01/22 职场文书
行政处罚听证告知书
2015/07/01 职场文书
幼儿园毕业典礼园长致辞
2015/07/29 职场文书
《学会看病》教学反思
2016/02/17 职场文书
mysql 8.0.27 绿色解压版安装教程及配置方法
2022/04/20 MySQL