待到芦花摇曳时，再倚西窗闻雁鸣，日落西山江上行，思缱绻，清月冷，风也寄情。光影斑驳，时光掠过，心于光阴的门楣，寂静欢喜。一纸素文，一缕清风，写意了心中的世界，终有一人的身影站立在风中于梦中，风去，影渐消。水潺潺，风声声，心低喃细语。 "
后台的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实例前使用
以上就是Vue之beforeEach非登录不能访问的如何实现（代码亲测）。音乐中含有美感，能使人态度娴雅，深思清爽，去野入文，怡然自得，以领略有生之乐。更多关于Vue之beforeEach非登录不能访问的如何实现（代码亲测）请关注haodaima.com其它相关文章！
