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 相关文章推荐
JavaScript高级程序设计 阅读笔记(十八) js跨平台的事件
Aug 14 Javascript
JS实现标签页效果(配合css)
Apr 03 Javascript
javascript:;与javascript:void(0)使用介绍
Jun 05 Javascript
EasyUi combotree 实现动态加载树节点
Apr 01 Javascript
全面解析Bootstrap中Carousel轮播的使用方法
Jun 13 Javascript
浅谈window.onbeforeunload() 事件调用ajax
Jun 29 Javascript
jQuery弹出层后禁用底部滚动条(移动端关闭回到原位置)
Aug 29 Javascript
javascript作用域链与执行环境详解
Mar 25 Javascript
vue插件vue-resource的使用笔记(小结)
Aug 04 Javascript
详谈commonjs模块与es6模块的区别
Oct 18 Javascript
angular 内存溢出的问题解决
Jul 12 Javascript
bootstrap select2插件用ajax来获取和显示数据的实例
Aug 09 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
CPU步进是什么意思?i3-9100F B0步进和U0步进区别知识科普
2020/03/17 数码科技
第一节--面向对象编程
2006/11/16 PHP
解析php mysql 事务处理回滚操作(附实例)
2013/08/05 PHP
[原创]php实现 data url的图片生成与保存
2016/12/04 PHP
laravel5.0在linux下解决.htaccess无效和去除index.php的问题
2019/10/16 PHP
js innerHTML 的一些问题的解决方法
2008/06/22 Javascript
JS关键字变色实现思路及代码
2013/02/21 Javascript
将文本输入框内容加入表中的js代码
2013/08/18 Javascript
JQuery Highcharts 动态生成图表的方法
2013/11/15 Javascript
JS方法调用括号的问题探讨
2014/01/24 Javascript
jQuery设置与获取HTML,文本和值的简单实例
2014/02/26 Javascript
js改变style样式和css样式的简单实例
2016/06/28 Javascript
JavaScript数组去重的几种方法效率测试
2016/10/23 Javascript
jQuery实现html table行Tr的复制、删除、计算功能
2017/07/10 jQuery
vue中的watch监听数据变化及watch中各属性的详解
2018/09/11 Javascript
vue如何限制只能输入正负数及小数
2019/07/04 Javascript
python list语法学习(带例子)
2013/11/01 Python
itchat接口使用示例
2017/10/23 Python
Python及PyCharm下载与安装教程
2017/11/18 Python
Python Xml文件添加字节属性的方法
2018/03/31 Python
python批量导入数据进Elasticsearch的实例
2018/05/30 Python
python 调用有道api接口的方法
2019/01/03 Python
python创造虚拟环境方法总结
2019/03/04 Python
Python提取特定时间段内数据的方法实例
2019/04/01 Python
3行Python代码实现图像照片抠图和换底色的方法
2019/10/10 Python
Django中从mysql数据库中获取数据传到echarts方式
2020/04/07 Python
全网最详细的PyCharm+Anaconda的安装过程图解
2021/01/25 Python
css3动画效果小结(推荐)
2016/07/25 HTML / CSS
应届生财务管理求职信
2013/11/06 职场文书
临床医师专业个人自我评价范文
2013/11/07 职场文书
护士自我评价范文
2014/01/25 职场文书
社保委托书怎么写
2014/08/02 职场文书
2014年学生党支部工作总结
2014/12/20 职场文书
淮阳太昊陵导游词
2015/02/10 职场文书
大学生实习介绍信
2015/05/05 职场文书
详解 TypeScript 枚举类型
2021/11/02 Javascript