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 相关文章推荐
JQuery的ajax获取数据后的处理总结(html,xml,json)
Jul 14 Javascript
js在输入框屏蔽按键,只能键入数字的示例代码
Jan 03 Javascript
jquery单行文字向上滚动效果示例
Mar 06 Javascript
javascript学习指南之回调问题
Apr 23 Javascript
Bootstrap3制作图片轮播效果
May 12 Javascript
使用PBFunc在Powerbuilder中支付宝当面付款功能
Oct 01 Javascript
Javascript 跨域知识详细介绍
Oct 30 Javascript
xmlplus组件设计系列之树(Tree)(9)
May 02 Javascript
jQuery ajax读取本地json文件的实例
Oct 31 jQuery
开发中常用的25个JavaScript单行代码(小结)
Jun 28 Javascript
原生JS实现留言板
Mar 26 Javascript
Vue实现点击当前行变色
Dec 14 Vue.js
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
多重?l件?合查?(二)
2006/10/09 PHP
获取URL文件名后缀
2013/10/24 PHP
php实现的mongodb操作类
2015/05/28 PHP
PHP unlink与rmdir删除目录及目录下所有文件实例代码
2018/02/07 PHP
laravel中的fillable和guarded属性详解
2019/10/23 PHP
使用Microsoft Ajax Minifier减小JavaScript文件大小的方法
2010/04/01 Javascript
JQuery live函数
2010/12/24 Javascript
js获取或设置当前窗口url参数的小例子
2013/10/14 Javascript
javascript中的作用域和上下文使用简要概述
2013/12/05 Javascript
node.js中的http.response.end方法使用说明
2014/12/14 Javascript
JQuery实现网页右侧随动广告特效
2016/01/17 Javascript
javascript中arguments,callee,caller详解
2016/03/16 Javascript
Javascript的表单与验证-非空验证
2016/03/18 Javascript
JavaScript数组去重的6个方法
2017/01/21 Javascript
详谈jQuery中使用attr(), prop(), val()获取value的异同
2017/04/25 jQuery
用vue构建多页面应用的示例代码
2017/09/20 Javascript
深入浅析vue组件间事件传递
2017/12/29 Javascript
使用vue制作探探滑动堆叠组件的实例代码
2018/03/07 Javascript
使用 Node.js 实现图片的动态裁切及算法实例代码详解
2018/09/29 Javascript
使用pkg打包Node.js应用的方法步骤
2018/10/19 Javascript
Node.js中package.json中库的版本号(~和^)
2019/04/02 Javascript
jQuery实现全选按钮
2021/01/01 jQuery
Python中函数的用法实例教程
2014/09/08 Python
Python使用scrapy采集数据过程中放回下载过大页面的方法
2015/04/08 Python
Python中map和列表推导效率比较实例分析
2015/06/17 Python
使用Python对Excel进行读写操作
2017/03/30 Python
python中实现字符串翻转的方法
2018/07/11 Python
python设置环境变量的作用和实例
2019/07/09 Python
python使用paramiko模块通过ssh2协议对交换机进行配置的方法
2019/07/25 Python
python 字典有序并写入json文件过程解析
2019/09/30 Python
TensorFlow 输出checkpoint 中的变量名与变量值方式
2020/02/11 Python
关于Python 解决Python3.9 pandas.read_excel(‘xxx.xlsx‘)报错的问题
2020/11/28 Python
深入解析HTML5的IndexedDB索引数据库
2015/09/14 HTML / CSS
个人整改措施书面材料
2014/10/24 职场文书
2015年挂职干部工作总结
2015/05/14 职场文书
反腐倡廉学习心得体会范文
2015/08/15 职场文书