zoukankan      html  css  js  c++  java
  • 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)
    })
     
     
    三,优化   =》可在注册成功后直接登陆
  • 相关阅读:
    githubz在add ssh key报错 Key is invalid. Ensure you've copied the file correctly 解决办法
    iOS 更改状态栏颜色
    iOS 加载图片选择imageNamed 方法还是 imageWithContentsOfFile?
    iOS UIWebView加载网页、文件、HTML
    XXX is undefine,全局搜索却只得到一个结果
    接口调用报错,全局搜索却找不到?vscode vue
    elementui下拉框选择一次以后再选,多项被选中的情况
    VUE+ elementui 表单rules validator 邮箱验证、电话号码验证、身份证验证、账号验证
    JS 验证input内容框 Demo(复制可测试)
    Vscode setting.json个人设置(包含保存格式化,空格、换行,标点符号自动增删)
  • 原文地址:https://www.cnblogs.com/500m/p/10999750.html
Copyright © 2011-2022 走看看