首页 > 开发 > Javascript > 正文

Vue之beforeEach非登录不能访问的实现(代码亲测)

2020-02-25 00:56:25
字体:
来源:转载
供稿:网友

后台的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实例前使用

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持错新站长站。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表