页面组件

登录页

<template><div><p>用户名：<input type="text" v-model="userName" /></p><p>密码：<input type="text" v-model="passWord" /></p><button @click="login()">登录</button></div>
</template><script>
export default {name:'LoginView',data(){return {userName:'root',passWord:'root'}},methods:{login(){}}
}
</script>

首页

  <div class="home"><h1>信息管理首页</h1>
<router-link to="/page1">导航一</router-link> 
<router-link to="/page2">导航二</router-link><router-view></router-view></div>
</template><script>
import axios from 'axios'
export default {
name:'HomePage',

路由配置

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
const routes=[
{path:'/login',name:'login',component:()=>import('../views/login')
}
]
const router=new Router({routes
})
router.beforeEach((to,from,next)=>{let token=window.sessionStorage.getItem('token')
if(to.path!='/login' && !token){
next({path:'/login'})
}else{if(to.path=='/login'&& token){next('/home')}else{next()}
}})export default router

一开始并没有重定向
to.path 和from.path都是’/’
在路由中添加全局守卫

sessionStorage有token：页面1去页面2–直接进入。页面1去登录页–直接跳转到首页
sessionStorage没有token：去登录页

sessionStorage和localStorage

sessionStorage：是会话期间的存储机制，数据只在当前标签页共享，存在本地，关闭浏览器后会清除数据，关闭标签页清除数据
localStorage：是持久化的存储机制，数据会存在浏览器中，浏览器关了数据也还在，只有清除缓存才会小时
token只应该在当前网站打开期间生效，因此应该保存在sessionStorage

window.sessionStorage.setItem('data',res[index].token)//将获取的到token保存到客户端seesionStorage中---设置键名data，值名res.data.token
获取token：const tokenStr=window.sessionStorage.getItem('token')

sessionStorage基本用法

// Save data to sessionStorage
sessionStorage.setItem('key', 'value');// Get saved data from sessionStorage
let data = sessionStorage.getItem('key');// Remove saved data from sessionStorage
sessionStorage.removeItem('key');// Remove all saved data from sessionStorage   谨慎使用。
sessionStorage.clear();

在这里插入图片描述

登录验证

		login(){
axios({method:'get',url:'http://localhost:3003/posts'}).then(response=>{//拿到返回值，response相当于axios中成功的返回var res=response.data,len=res.length,userNameArr=[], passWordArr=[],ses=window.sessionStorage;for(var i=0;i<len;i++){userNameArr.push(res[i].username)passWordArr.push(res[i].password)}if(userNameArr.indexOf(this.userName)===-1){alert('账号不存在')}else{var index=userNameArr.indexOf(this.userName)if(passWordArr[index]===this.passWord){ses.setItem('data',res[index].token)//将获取的到token保存到客户端seesionStorage中this.$router.push('/home') //跳转页面到首页}else{alert('密码错误')}}
}).catch(err=>{alert('连接服务器失败',err)
})}}
}