actions:{ async checkMe({commit}){ //请求/me接口,对登录信息进行判断,并保留状态 const result = await Vue.prototype.$http.get('/me').then(data=>data.data); //返回值为false,跳转至login if(!result){ router.push({name:'login'}) return } commit('changeLogin',{result}) } }
3.后端的检测登录接口接收到请求,进行判断
//验证是否登录 app.get('/me', function (req, res) { //判断session是否为true if(req.session.login){ res.send(true) }else{ res.send(false) } })
如果返回结果为true,登录状态,就可以进行页面跳转了.
六丶登录
1.登录页Login.vue - 请求登录接口,登录成功后将信息保存到store
<template> <div> <h1>登录</h1> <Button @click="login">登录</Button> <route_list></route_list> </div> </template> <script> import route_list from '../components/route_list' export default { components:{ route_list }, methods:{ async login(){ //请求登录接口 const result = await this.$http.get("/login").then(data=>data.data); //记录登录状态 this.$store.commit('me/changeLogin',{result}) } }, } </script>
2.后端登录接口接收到请求,生成session
//登录接口,更改session状态 app.get('/login', function (req, res) { req.session.login = true, res.send(true) })
现在就是登录状态了
七丶注销
1.登录页Logout.vue - 请求注销接口,注销成功后将信息保存到store
<template> <div> <h1>注销</h1> <Button @click="login">注销</Button> <route_list></route_list> </div> </template> <script> import route_list from '../components/route_list' export default { components:{ route_list }, data(){ return{ } }, methods:{ async login(){ const result = await this.$http.get("/logout").then(data=>data.data); this.$store.commit('me/changeLogin',{result}) } }, } </script>
2.后端注销接口接收到请求,更改session状态
//登录接口,更改session状态 app.get('/login', function (req, res) { req.session.login = false, res.send(false) })
现在就是注销状态了
完成展示(gif,可能加载不出来):
