一、登录后显示

1）Msite.vue头部登录后信息

<TopHeader :title='address.name'><!-- 【1】点图标跳转到搜索页 --><router-link to="/search" class="header_search" slot='left'><i class="iconfont icon-sousuo"></i></router-link><!-- 【3】状态中有用户id说明已登录，跳转到个人中心，否则跳转到登录页 --><router-link :to=" userInfo._id ? '/profile':'/login'" class="header_login" slot='right'><!-- 【4】未登录显示登录，否则显示个人中心小图标 --><span class="header_login_text" v-if="!userInfo._id">登录|注册</span><span class="header_login_text" v-else><i class="iconfont icon-person"></i></span></router-link>
</TopHeader>import {mapState} from 'vuex' //1调用vuex管理的状态
computed:{//把vuex管理的状态:地址/滑动导航分类解构到当前位置/*mapState返回的值：函数(对象)参数来自store/state.js*/// 【2】读取状态中的用户信息...mapState(['address','categorys','userInfo']),
略过...
}

效果：http://localhost:8080/

左：跳转到搜索右：由注册变图标，点跳转到个人中心

2）profile.vue登录后信息

<!-- 【2】如果已经登录，则跳转到个人资料,否则跳转到登录页面 --><router-link :to="userInfo._id ? '/user_info' : '/login'" class="profile-link"><div class="profile_image"><i class="iconfont icon-person"></i></div><div class="user-info"><!-- 没有手机号则显示用户名或登录注册 --><p class="user-info-top" v-if="!userInfo.phone">{{userInfo.name || '登录/注册' }}</p><p><span class="user-icon"><i class="iconfont icon-shouji icon-mobile"></i></span><span class="icon-mobile-number">{{userInfo.phone || '暂无绑定手机号'}}</span></p></div><span class="arrow"><i class="iconfont icon-jiantou1"></i></span></router-link>import {mapState} from 'vuex'
export default{computed:{//读取状态中的userInfo...mapState(['userInfo'])}
}

效果：http://localhost:8080/#/profile

二、保持登录状态

原理：cookie结合后端session保持登录

保持登录详：https://blog.csdn.net/a754895/article/details/82632747

a.根目录/app.js 使用session设置cookie的会话时间为一天

app.use(session({secret: '12345',//设置maxAge是80000ms，即80s后session和相应的cookie失效过期cookie: {maxAge: 1000*60*60*24 },  resave: false,saveUninitialized: true,
}));

b.routes/index.js

重点：从此处开始:UserModel.findOne(

/*
密码登陆*/
router.post('/login_pwd', function (req, res) {const name = req.body.nameconst pwd = md5(req.body.pwd)const captcha = req.body.captcha.toLowerCase()console.log('/login_pwd', name, pwd, captcha, req.session)// 可以对用户名/密码格式进行检查, 如果非法, 返回提示信息if(captcha!==req.session.captcha) {return res.send({code: 1, msg: '验证码不正确'})}// 删除保存的验证码delete req.session.captchaUserModel.findOne({name}, function (err, user) {if (user) {console.log('findUser', user)if (user.pwd !== pwd) {res.send({code: 1, msg: '用户名或密码不正确!'})} else {req.session.userid = user._idres.send({code: 0, data: {_id: user._id, name: user.name, phone: user.phone}})}} else {const userModel = new UserModel({name, pwd})userModel.save(function (err, user) {// 向浏览器端返回cookie(key=value)// res.cookie('userid', user._id, {maxAge: 1000*60*60*24*7})req.session.userid = user._idconst data = {_id: user._id, name: user.name}// 3.2. 返回数据(新的user)res.send({code: 0, data})})}})
})

1）src/api/index.js

// 9、根据会话获取用户信息
export const reqUserInfo = () => ajax(BASE_URL+'/userinfo')

2）src/store/state.js

userInfo: {}, // 用户信息

3）mutation-types.js

export const RECEIVE_USER_INFO = 'receive_user_info' // 接收用户信息

4）mutations.js

import {RECEIVE_USER_INFO} from './mutation-types.js'export default{[RECEIVE_USER_INFO](state,{userInfo}){state.userInfo=userInfo},
}

5）src/store/actions.js

// 控制mutations
import {...略过RECEIVE_USER_INFO,
} from './mutation-types.js'
import {...略过reqUserInfo, //获取session的用户信息
} from '../api/index.js'export default{//异步获取自session中的用户信息async getUserInfo({commit}){const result=await reqUserInfo()if(result.code===0){const userInfo=result.datacommit(RECEIVE_USER_INFO,{userInfo})}},
}

6）app.vue

页面加载时，发起一次获取用户信息请求，实现登录保持

//【0】引入vuex的action
import {mapActions} from 'vuex'export default{mounted(){/* 调用actions方法1：getAddress来源actions.jsthis.$store.dispatch('getAddress')*/// 【1】调用actions方法2：this.getAddress()this.getUserInfo()},methods:{// 【2】调用actions方法2：把getAddress方法解构到当前位置// mapActions() 返回的是一个对象, // 用了 ... 扩展符后，才可以放进一个对象里，// 和其他组件内定义的 method 在同一个 methods 对象。// 参数来自：store/actions.js内的方法...mapActions(['getAddress','getUserInfo'])}
}

效果：登录成功之后，一天内无论是刷新还是关闭浏览器重新进网站都会保持登录状态

Vue外卖十一：登录成功信息显示、浏览器cookie+后端session登录状态保持相关推荐

模拟QQ登陆，输入账号与密码，如果账号与密码正确则显示登录成功，如果失败则重新登录，并显示登录错误几次，如果登录错误三次则程序结束登录失败。
模拟QQ登陆,输入账号与密码,如果账号与密码正确则显示登录成功,如果失败则重新登录,并显示登录错误几次,如果登录错误三次则程序结束登录失败. public class Test3 { public s ...
Cookie和Session 登录
Cookie 实现免登陆和Session 01. 需求说明完成用户登录功能登录成功后跳到成功页面,显示用户名登录失败可以跳回登录页面登录成功后后续操作均能显示当前登录的用户名 02.完成代码 ...
dede login.php,DedeCms会员登录成功，又跳转到登录页面
我使用的是dedecms5.7的sp1版本,整合了Discuz+UChome,三个都通信成功.然后后面我测试同步登录和退出的时候,发现dede的会员登录成功,但是又马上跳转到登录页面,就是说不能进入会 ...
一周内自动登录php,利用php实现一周之内自动登录存储机制（cookie、session、localStorage）...
cookie.session.localStorage这三个应该是最让程序员头疼的了,我利用简单的登录界面的username和password来说明一下吧. 1.cookie用来存储用户相关数据,存储 ...
php登录实现session记住密码,利用php实现一周之内自动登录存储机制（cookie、session、localStorage）...
cookie.session.localStorage这三个应该是最让程序员头疼的了,我利用简单的登录界面的username和password来说明一下吧. 1.cookie用来存储用户相关数据,存储 ...
js 实现登录成功首页显示用户名和退出登录
需求说明网站开发过程中,最常见的就是用户的登录和退出在用户登录成功的时候,首页要显示用户名,把用户名存储在浏览器中在点击退出的时候,要消除用户名,把用户名存储信息删除应用的技术 jquery的 ...
登录成功后如何在首页获取登录名
1.如果页面时jsp就非常简单了,直至用EL表达式从session中取值 jsp页面直接${user.login_name}的方式取值就可以了 2.如何设计的页面是html静态页面,不是jsp动态页面 ...
phpcms登录成功后又跳转到登录页的bug修复方法
昨天遇到的这个问题,登录后显示登录成功后又跳出来这个,后跳转到登录页我饿解决方法就是在index.php入口文件里面添加还有就是配置文件的问题,里面的session的作用域的问题,吧sessi ...
java qq登录成功界面_java实现简单QQ登录界面
本文实例为大家分享了java实现简单QQ登录界面的具体代码,供大家参考,具体内容如下 java在图形界面,不是太强项,但不是不可以做,它的开源是very nice! 实现代码如下(想实现完美的界面,可 ...
ajax实现登录成功后设置cookie,使用jquery的cookie实现登录页记住用户名和密码的方法...
对于初学者来说,登录页记住用户名和密码的功能是经常会遇到的(通常会用javaee的api去实现),今天为大家介绍在前端页面直接用jquery实现该功能(比传统的方法简单多了),长话短说直接进入正题: ...

Vue外卖十一：登录成功信息显示、浏览器cookie+后端session登录状态保持

一、登录后显示

1）Msite.vue头部登录后信息

效果：http://localhost:8080/

2）profile.vue登录后信息

效果：http://localhost:8080/#/profile

二、保持登录状态

原理：cookie结合后端session保持登录

a.根目录/app.js 使用session设置cookie的会话时间为一天

b.routes/index.js

1）src/api/index.js

2）src/store/state.js

3）mutation-types.js

4）mutations.js

5）src/store/actions.js

6）app.vue

效果：登录成功之后，一天内无论是刷新还是关闭浏览器重新进网站都会保持登录状态

Vue外卖十一：登录成功信息显示、浏览器cookie+后端session登录状态保持相关推荐

最新文章

热门文章