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 相关文章推荐
ext checkboxgroup 回填数据解决
Aug 21 Javascript
前端开发的开始---基于面向对象的Ajax类
Sep 17 Javascript
理解Javascript_09_Function与Object
Oct 16 Javascript
js 完美图片新闻轮转效果,腾讯大粤网首页图片轮转改造而来
Nov 21 Javascript
深入理解JavaScript系列(10) JavaScript核心(晋级高手必读篇)
Jan 15 Javascript
zepto.js中tap事件阻止冒泡的实现方法
Feb 12 Javascript
JavaScript基本数据类型及值类型和引用类型
Aug 25 Javascript
video.js使用改变ui过程
Mar 05 Javascript
JS获取并处理php数组的方法实例分析
Sep 04 Javascript
vue中前进刷新、后退缓存用户浏览数据和浏览位置的实例讲解
Sep 21 Javascript
详解BootStrap表单验证中重置BootStrap-select验证提示不清除的坑
Sep 17 Javascript
javascript递归函数定义和用法示例分析
Jul 22 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操作SVN版本服务器类代码
2011/11/27 PHP
PHP仿盗链代码
2012/06/03 PHP
解析php中array_merge与array+array的区别
2013/06/21 PHP
php使用curl详细解析及问题汇总
2016/08/11 PHP
php获取ip及网址的简单方法(必看)
2017/04/01 PHP
jQuery DIV弹出效果实现代码
2009/07/03 Javascript
当自定义数据属性为json格式字符串时jQuery的data api问题探讨
2013/02/18 Javascript
有关jQuery中parent()和siblings()的小问题
2016/06/01 Javascript
值得分享的bootstrap table实例
2016/09/22 Javascript
浅析javascript中的Event事件
2016/12/09 Javascript
微信小程序教程系列之设置标题栏和导航栏(7)
2020/06/29 Javascript
JS自定义滚动条效果简单实现代码
2020/10/27 Javascript
重新认识vue之事件阻止冒泡的实现
2018/08/02 Javascript
Vue 列表上下过渡效果的实例代码
2019/06/25 Javascript
微信小程序 生成携带参数的二维码
2019/10/23 Javascript
浅析VUE防抖与节流
2020/11/24 Vue.js
element中Steps步骤条和Tabs标签页关联的解决
2020/12/08 Javascript
python 切片和range()用法说明
2013/03/24 Python
Python工程师面试题 与Python基础语法相关
2016/01/14 Python
Python编程实现数学运算求一元二次方程的实根算法示例
2017/04/02 Python
django模板语法学习之include示例详解
2017/12/17 Python
Django 忘记管理员或忘记管理员密码 重设登录密码的方法
2018/05/30 Python
python针对mysql数据库的连接、查询、更新、删除操作示例
2019/09/11 Python
python3中使用__slots__限定实例属性操作分析
2020/02/14 Python
Matplotlib 绘制饼图解决文字重叠的方法
2020/07/24 Python
解决python和pycharm安装gmpy2 出现ERROR的问题
2020/08/28 Python
python time.strptime格式化实例详解
2021/02/03 Python
校园招聘策划书
2014/01/09 职场文书
第一批党的群众路线教育实践活动总结报告
2014/07/03 职场文书
领导班子四风对照检查材料思想汇报
2014/09/26 职场文书
工程部部长岗位职责
2015/02/12 职场文书
建筑工程材料员岗位职责
2015/04/11 职场文书
保外就医申请书范文
2015/08/06 职场文书
环保建议书范文
2015/09/14 职场文书
OpenCV3.3+Python3.6实现图片高斯模糊
2021/05/18 Python
浅析JavaScript中的变量提升
2022/06/01 Javascript