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 相关文章推荐
eval与window.eval的差别分析
Mar 17 Javascript
js简单的表格添加行和删除行操作示例
Mar 31 Javascript
Node.js中使用Buffer编码、解码二进制数据详解
Aug 16 Javascript
jquery实现表单输入时提示文字滑动向上效果
Aug 10 Javascript
JavaScript截取指定长度字符串点击可以展开全部代码
Dec 04 Javascript
Bootstrap基本组件学习笔记之分页(12)
Dec 08 Javascript
angular+ionic 的app上拉加载更新数据实现方法
Jan 16 Javascript
localStorage的黑科技-js和css缓存机制
Feb 06 Javascript
最全的JavaScript开发工具列表 总有一款适合你
Jun 29 Javascript
jQuery实现简单的计时器功能实例分析
Aug 29 jQuery
vue-cli3.X快速创建项目的方法步骤
Nov 14 Javascript
小程序实现上传视频功能
Aug 18 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打印一个边长为N的实心和空心菱型的方法
2015/03/02 PHP
BOOM vs RR BO5 第一场 2.14
2021/03/10 DOTA
原生Js实现元素渐隐/渐现(原理为修改元素的css透明度)
2013/06/24 Javascript
DOM操作一些常用的属性汇总
2015/03/13 Javascript
基于BootStarp的Dailog
2016/04/28 Javascript
深入解析桶排序算法及Node.js上JavaScript的代码实现
2016/07/06 Javascript
利用PM2部署node.js项目的方法教程
2017/05/10 Javascript
node.js中cluster的使用教程
2017/06/09 Javascript
微信小程序实现倒计时60s获取验证码
2020/04/17 Javascript
微信小程序实现漂亮的弹窗效果
2020/05/26 Javascript
前端js中的事件循环eventloop机制详解
2019/05/15 Javascript
微信小程序利用button控制条件标签的变量问题
2020/03/15 Javascript
基于javascript的无缝滚动动画实现2
2020/08/07 Javascript
[04:29]2014DOTA2国际邀请赛 主赛事第三日TOPPLAY
2014/07/21 DOTA
[02:28]DOTA2亚洲邀请赛 LGD战队巡礼
2015/02/03 DOTA
Python发送Email方法实例
2014/08/21 Python
Python使用py2exe打包程序介绍
2014/11/20 Python
Django框架下在URLconf中指定视图缓存的方法
2015/07/23 Python
pandas数值计算与排序方法
2018/04/12 Python
python 移除字符串尾部的数字方法
2018/07/17 Python
Pandas时间序列:时期(period)及其算术运算详解
2020/02/25 Python
python中的错误如何查看
2020/07/08 Python
基于Python编写一个计算器程序,实现简单的加减乘除和取余二元运算
2020/08/05 Python
python -v 报错问题的解决方法
2020/09/15 Python
python使用scapy模块实现ARP扫描的过程
2021/01/21 Python
详解css3中 text-fill-color属性
2019/07/08 HTML / CSS
c/c++某大公司的两道笔试题
2014/02/02 面试题
金士达面试非笔试
2012/03/14 面试题
优秀实习自我鉴定
2013/12/04 职场文书
岗位竞聘演讲稿
2014/01/10 职场文书
党员群众路线承诺书
2014/05/20 职场文书
普通党员个人整改措施
2014/10/27 职场文书
2014年幼儿园教研工作总结
2014/12/04 职场文书
立案决定书范文
2015/06/24 职场文书
大学生社会实践感想
2015/08/11 职场文书
javascript的var与let,const之间的区别详解
2022/02/18 Javascript