zoukankan      html  css  js  c++  java
  • 12 ~ 普通用户和管理员功能的实现

    思维导图 :

    一,/schemas/users.js   在数据库中新增 是否是管理员字段 

    var mongoose = require('mongoose')
    // 创建表结构
    module.exports =new mongoose.Schema({
      username:String,
      password:String,
      
      /**
      *  拓展 : 定义数据类型和默认值
      */
      isAdmin:{
        type:Boolean,
        default:false
      }
    })
     

    二,在数据库中手动添加一个超级管理员:

    三,在入口文件 app.js  中引入 User 模型 进行管理员验证

    app.use((req, res, next) => {
      
      //调用 cookies 的方法把 cookie 加载到 【 req 】 这个对象里面
      req.cookies = new Cookies(req, res)

        

      //创建一个全局变量,给所有路由访问。 把数据保存到 req 对象中
      req.userInfo = {}

      

      if (req.cookies.get("userInfo")) {
        try {

          // 解析登陆用户的 cookie 信息
          var userInfo = req.cookies.get("userInfo")
          req.userInfo = JSON.parse(decodeURI(userInfo))
          console.log('app.js, 解析userinfo-成功')
          console.log(req.userInfo)

          // 获取当前用户的类型,是否时管理员
          User.findById(req.userInfo._id).then((userInfo)=>{
            if(userInfo.isAdmin == true){
              req.userInfo.isAdmin = true
            }
            next() // ----- 注意 ----【 添加完数据必须在此处 next() , 在作用域外将没有数据】
           })
     
        } catch (e) {
          console.log("app.js, 解析cookie信息失败")
          next()
        }
      
      }else{
        next()
      }
    })

    四,前台路由文件(也称前台模板)  /router/main.js    , 获取数据 

      var express = require('express')
      var router = express.Router()

      router.get('/',(req,res,next)=>{
        // res.render('main/index') //index.html 的 .html后缀 可以省略 . 【注意: main/index :表示main文件夹下的index.html 】

        /**
        *  将用户信息分配给模板 => 通过 res.render方法的第二个参数进行传入
        *
        *  传入的对象就是 分配给模板 去使用的数据
        */
     
        console.log(('req.userInfo 数据 :'+JSON.stringify(req.userInfo)).yellow)
        res.render('login',{
          userInfo:req.userInfo
        })
    })

    module.exports = router

    五,前台文件  /views/login.html  , 通过模板数据来进行判断

    {% if userInfo._id %}

      {% if userInfo.isAdmin %}
        <div id="admin">
          <h5>你好 <span id="user">{{userInfo.username}}</span></h5>
          <a href="/admin">你可以点击这里进入应用后台管理中心</a><br>
          <a href="/logout" id="logout">退出登陆</a>
        </div>
      {% else %}
      
      <div class="userinfo">
      <h2>你好 <span id="user">{{userInfo.username}}</span></h2>
      <a href="/logout" id="logout">退出登陆</a>
      </div>
      {% endif %}

     
     
     
      {% 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 中。

  • 相关阅读:
    向架构师进军--->如何编写软件架构文档
    让创意更有黏性!
    eaby技术架构变迁
    应用系统之间数据传输的几种方式
    基于 CAS 无锁实现的 Disruptor.NET 居然慢于 BlockingCollection,是真的吗?
    调整数据库表结构,搞定 WordPress 数据库查询缓慢问题
    dynamic-css 动态 CSS 库,使得你可以借助 MVVM 模式动态生成和更新 css,从 js 事件和 css 选择器的苦海中脱离出来
    ASP.NET Framework 重写后的 .NET 异常报错界面(异常堆栈和溯源一目了然)
    Orchard Core 中运行带程序上下文的单元测试
    Angular 2 前端 http 传输 model 对象及其外键的问题
  • 原文地址:https://www.cnblogs.com/500m/p/11007494.html
Copyright © 2011-2022 走看看