给网友朋友们带来一篇Vue中beforeEach非登录访问相关的编程文章，网友聂文翰根据主题投稿了本篇教程内容，涉及到Vue、beforeEach、非登录访问、Vue之beforeEach非登录不能访问的实现（代码亲测）相关内容，已被697网友关注，涉猎到的知识点内容可以在下方电子书获得。
Vue之beforeEach非登录不能访问的实现（代码亲测）
后台的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实例前使用
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持码农之家。
