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中parseInt()函数的定义和用法分析
Dec 20 Javascript
js兼容火狐获取图片宽和高的方法
May 21 Javascript
jQuery实现带动画效果的多级下拉菜单代码
Sep 08 Javascript
Jquery时间轴特效(三种不同类型)
Nov 02 Javascript
js立即执行函数: (function ( ){})( ) 与 (function ( ){}( )) 有什么区别?
Nov 18 Javascript
关于vue.js过渡css类名的理解(推荐)
Apr 10 Javascript
vue页面跳转后返回原页面初始位置方法
Feb 11 Javascript
JS实现的RC4加密算法示例
Aug 16 Javascript
基于jQuery ztree实现表格风格的树状结构
Aug 31 jQuery
基于JS实现前端压缩上传图片的实例代码
May 14 Javascript
Nuxt使用Vuex的方法示例
Sep 06 Javascript
JS一分钟在github+Jekyll的博客中添加访问量功能的实现
Apr 03 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 has encountered an Access Violation
2007/01/15 PHP
php加密解密实用类分享
2014/01/07 PHP
Stop SQL Server
2007/06/21 Javascript
[HTML/CSS/Javascript]WWTJS
2007/09/25 Javascript
asp批量修改记录的代码
2008/06/25 Javascript
ajax页面无刷新 IE下遭遇Ajax缓存导致数据不更新的问题
2012/12/11 Javascript
用js提交表单解决一个页面有多个提交按钮的问题
2014/09/01 Javascript
JavaScript的模块化开发框架Sea.js上手指南
2016/05/12 Javascript
详解使用Vue.Js结合Jquery Ajax加载数据的两种方式
2017/01/10 Javascript
JavaScript基于replace+正则实现ES6的字符串模版功能
2017/04/25 Javascript
JS加密插件CryptoJS实现AES加密操作示例
2018/08/16 Javascript
解决vue同一slot在组件中渲染多次的问题
2018/09/06 Javascript
小程序分页实践之编写可复用分页组件
2019/07/18 Javascript
JQuery常用简单动画操作方法回顾与总结
2019/12/07 jQuery
JavaScript中的惰性载入函数及优势
2020/02/18 Javascript
用webAPI实现图片放大镜效果
2020/11/23 Javascript
javascript实现京东快递单号的查询效果
2020/11/30 Javascript
Python向日志输出中添加上下文信息
2017/05/24 Python
Python使用正则表达式获取网页中所需要的信息
2018/01/29 Python
python3爬取淘宝信息代码分析
2018/02/10 Python
Python使用pip安装pySerial串口通讯模块
2018/04/20 Python
Python Gluon参数和模块命名操作教程
2019/12/18 Python
Python3中configparser模块读写ini文件并解析配置的用法详解
2020/02/18 Python
python用Configobj模块读取配置文件
2020/09/26 Python
ebookers英国:隶属全球最大的在线旅游公司Expedia
2017/12/28 全球购物
哈利波特商店:Harry Potter Shop
2018/11/30 全球购物
static函数与普通函数有什么区别
2015/12/25 面试题
医学生实习自荐信
2013/10/01 职场文书
学生手册家长评语
2014/02/10 职场文书
品酒会策划方案
2014/05/26 职场文书
高等学院职业生涯规划书范文
2014/09/16 职场文书
道士塔读书笔记
2015/06/30 职场文书
赞助商致辞
2015/07/30 职场文书
Python实现拼音转换
2021/06/07 Python
深入浅析Django MTV模式
2021/09/04 Python
十大最强电系宝可梦,阿尔宙斯电系之一,第七被称为雷神
2022/03/18 日漫