• 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)
    })
     
     
    三,优化   =》可在注册成功后直接登陆
  • 相关阅读:
    JQuery实现滚动广告
    写链表时报HEAP CORRUPTION DETECTED: before Normal block
    ubuntu 运行sh提示unexpected operator
    解决Visual C++ 6 绿色版 Gallery 目录为空的问题
    写堆栈的时候报的奇怪的错。
    ubuntu开启SSH服务
    ubuntu修改runlevel
    Hello.Android.3rd.Edition——读书笔记
    java程序员应该掌握的10技能
    格式化数字的方法
  • 原文地址:https://www.cnblogs.com/500m/p/10999750.html
Copyright © 2020-2023  润新知