10 ~ express ~ 使用 cookie 保存用户 信息
思维导图：
（1） 保存 cookie
（2）销毁 cookie
一，保存 cookie
1，app.js 。 新增代码
var Cookies = require('cookies')
/**
* 5，配置 cookie -------------------【注意顺序】 -----------【配置文件要放在路由前面】
* 通过中间件的形式，只有用户访问网站，都会经过这个程序
*/
app.use((req,res,next)=>{
//调用 cookies 的方法把 cookie 加载到 【 req 】 这个对象里面
req.cookies = new Cookies(req,res)
/**
* 获取浏览器 之前保存好放在头信息中发送给服务端的 cookie ，随便加载哪一个页面，都会获取到。
* 获取到的为字符串，需要转换为对象
*/
// console.log(req.cookies.get('userInfo'))
// console.log(typeof req.cookies.get('userInfo'))
/**
* 判断用户是否登陆
* 1,创建一个全局变量，给任何路由访问。 把数据保存到 req 对象中
*/
//解析登陆用户的 cookie 信息
req.userInfo = {}
if(req.cookies.get('userInfo')){
try {
req.userInfo = JSON.parse(req.cookies.get('userInfo'))
} catch (error) {
}
}
// 通过对象的 get和set 方法 来获取和设置 cookie => 通过 api.js 来操作
next()
})
2，/router/api.js 。 新增代码
/**
* 向浏览器发送一个cookie信息
* JSON.stringfy => 保存字符串 => 存入到 userInfo
*/
req.cookies.set('userInfo',JSON.stringify({
_id :userInfo._id,
username : userInfo.username
}))
res.json(responseData)
return
3，/public/js/index.js 。ajax修改部分
success:(data)=>{
console.log(data)
if(data.userInfo.username){
/**
* 因为使用了模板语法渲染。 => 重载页面
*/
window.location.reload()
}
if(data.userInfo.username=='admin'){
$admin.show();
}else{
$admin.hide();
}
}
4，前端页面 /views/login.html
{% if userInfo._id %}
<div class="userinfo">
<h2>hello 。 <span id="user">{{userInfo.username}}</span></h2>
<a href="/logout" id="logout">退出登陆</a>
</div>
<div id="admin" class="none">
你是管理员，<a href="/admin">你可以点击这里进入应用后台管理中心</a><br>
</div>
{% else %}
<div class="form" id="register">
<div class="form-group">
<label for="username">用户名</label>
<input type="text" class="form-control" id="username" name="username" placeholder="User">
</div>
<div class="form-group">
<label for="password">密码</label>
<input type="password" class="form-control" id="password" name="password" placeholder="Password">
</div>
<div class="form-group">
<label for="repassword">密码</label>
<input type="password" class="form-control" id="repassword" name="repassword" placeholder="Password">
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">注册</button>
<div class="info"></div>
</div>
已有账号？马上<a class="change" href="javacript:void(0);">登陆</a>
</div>
<div class="form" id="login">
<div class="form-group">
<label for="username">用户名</label>
<input type="text" class="form-control" id="username" name="username" placeholder="User">
</div>
<div class="form-group">
<label for="password">密码</label>
<input type="password" class="form-control" id="password" name="password" placeholder="Password">
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">登 陆</button>
</div>
还没注册？马上<a class="change" href="javacript:void(0);">注册</a>
</div>
{% endif %}
二，注销 cookie
1，/public/js/index.js
$logout.on('click',()=>{
$.ajax({
url:'/api/user/logout',
success:(data)=>{
if(!data.code){
window.location.reload()
}
}
})
})
2，/router/api.js
router.get('/user/logout',(req,res,next)=>{
req.cookies.set('userInfo',null)
res.json(responseData)
})
三，优化 =》可在注册成功后直接登陆
