如何实现Vue中beforeEach守卫确保非登录用户无法访问任何页面？

本文共计345个文字，预计阅读时间需要2分钟。

后端的PHP请求就是接收以下这些参数：login.vue、templateDiv、class=' '、input type='text' v-model='name'、input type='password' v-model='password'、button type='primary' @click='submitForm' router-link :to='{path: ''}'。

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持易盾网络。