vue和token

ゞ浴缸里的玫瑰 2021-10-01 07:02 353阅读 0赞

# Token 使用： #

1.  下载 npm install --save jsonwebtoken 并且引用
2.  在登录成功之后创建一个token 并且把这个token 发送给前端 前端使用相应的技术保存起来（cookie 本地存储）

//启动服务
    var express = require("express");
    var app = express();
    //3.引入加密模块
    var crypto = require("crypto");
    //5.引入mongoose模块
    var mongoose = require("mongoose");
    //10.引入post的解析模块body-parser
    var bodyParser = require("body-parser");
    //11.使用bodyParse下的解析post功能
    var uE = bodyParser.urlencoded({
        extended: false
    });
    // ***15***token******* 引用下载好的token模块
    var jwt=require("jsonwebtoken");
    //2.解决跨域
    app.use(function (req, res, next) {
        res.header('Access-Control-Allow-Origin', '*');
        res.header('Access-Control-Allow-Headers', 'Content-Type,Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild');
        res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE,OPTIONS');
        next();
    })
    //7.定义集合，不能将集合放到路由内部
    var dbclt = mongoose.model("no1", {
        uname: String,
        upwd: String
    })
    //1.得到前台的数据
    app.get("/reg", function (req, res) {
        var uname = req.query.uname;
        var upwd = req.query.pwd;
        console.log(uname + "---" + upwd);
        //4.开始加密数据
        var mb5Pwd = crypto.createHash('md5').update(upwd).digest('hex');
        console.log(mb5Pwd);
        //6.连接数据库
        mongoose.connect("mongodb://localhost:27017/mgd", {
            useNewUrlParser: true
        }, function (err) {
            if (err) {
                console.log("数据库连接失败" + err);
            } else {
                console.log("数据库连接成功");
                //8.设置存入的数据
                var userdemo = new dbclt({
                    uname,
                    upwd: mb5Pwd
                })
                //9.开始存储
                userdemo.save().then(
                    (ok) => {
                        res.send({
                            mes: "注册成功",
                            status: 200,
                            linkid: 1
                        })
                    },
                    (err) => {
                        res.send({
                            mes: "注册失败",
                            status: 200,
                            linkid: 1
                        })
                    }
                )
            }
        })
        // res.send("ok");
    })
    //把解析模块注入到post的路由当中
    app.post("/login", uE, function (req, res) {
        //12.开始接受前台传过来的数据
        var uname = req.body.uname;
        var upwd = req.body.upwd;
        console.log(uname + "===" + upwd);
        //13.开始加密当前密码
        var mb5Pwd = crypto.createHash('md5').update(upwd).digest('hex');
        // var md5Pwd = crypto.createHash('md5').update(upwd).digest('hex');
        //14.查询数据库
        mongoose.connect("mongodb://localhost:27017/mgd", {
            useNewUrlParser: true
        }, function (err) {
            if (err) {
                console.log("数据库连接失败" + err);
            } else {
                console.log("数据库连接成功");
                dbclt.find({
                    uname: uname,
                    upwd: mb5Pwd
                }).then(
                    (ok) => {
                        // 在查询的时候成功可能有两种结果 第一种查出来值了 第二种没有查出来但是反悔了一个空数组
                        if (ok.length > 0) {
                            // ******16******token  2 创建token 用来保存用户的登录信息
                            // jwt.sign(要保存的数据，私钥（一堆越乱越好的乱码）)
                            var obj = {
                                loginok: true,
                                uname: uname
                            }
                            var miyao = "qwertyuiop1472583690";
                            var token=jwt.sign(obj,miyao);
                            res.send({
                                mes: "登录成功",
                                status: 200,
                                linkid: 2,
                                token
                            });
                        } else if (ok.length == 0) {
                            res.send({
                                mes: "登录失败",
                                status: 200,
                                linkid: 3
                            });
                        }
                    },
                    (err) => {
                        res.send({
                            mes: "连接超时，请稍后再试",
                            status: 500,
                            linkid: 4
                        })
                    }
                )
            }
        })
    })
    app.get("/index", function (req, res) {
        // 解密token
        // jwt.verify(验证的token,加密的密文，回调)
        // 得到前台发送过来的token
        var token = req.query.token;
        var miyao = "qwertyuiop1472583690";
        jwt.verify(token, miyao, function (err, data) {
            console.log(data);
            // 判断loginok是否是true
            if (data.loginok == true) {
                res.send({
                    status: 200,
                    mes: "用户已经登录",
                    linkid: 8,
                    uname: data.uname
                })
            } else {
                res.send({
                    status: 500,
                    mes: "没有登录",
                    linkid: 9
                })
            }
    
        })
    })
    app.listen(3000);

**前端存储：**

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <script src="node_modules/jquery/dist/jquery.min.js"></script>
    </head>
    
    <body>
        <h1>我是首页 用户必须登录之后再能访问我 所以在页面加载完毕之后我会自动的发送一个ajax到后台
            去查询当前的用户登录状态如果为true那就表明他登录了 反之 帮助用户跳转到登录页面
        </h1>
        <script>
            $(document).ready(function () {
                // 去出token
                var localtoken = window.localStorage.getItem("token");
                // 如果有用从来没有登陆过第一次登陆 token有吗？
                if (localtoken) {
                    $.ajax({
                        url: "http://localhost:3000/index",
                        type: "get",
                        data: {
                            token: localtoken
                        },
                        success(data) {
                            console.log(data)
                            if (data.linkid == 8) {
                                alert("欢迎您" + data.uname)
                            } else if (data.linkid == 9) {
                                alert("不好意思当前页面仅对会员开放请您登录后访问");
                                location.href = "login.html"
                            }
                        }
                    })
                } else {
                    alert("您没有登录请您登录后访问");
                    window.location.href = "login.html";
                }
            })
        </script>
    </body>
    
    </html>

1.  登录存储token已经完成了 接下来在首页进行身份信息的验证

1.把本地存储中的token取出来
    2.发送给后端
    3.后端进行解密 然后判断解密出来的数据是否是登陆过的  把结果返回给前台   前台做出相关的界面提示

# VUE #

## Vue.js 是什么 ##

**是一套构建用户界面的渐进式的自底向上增量开发MVVM框架，Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件**  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MjAwMTg1_size_16_color_FFFFFF_t_70][]

## 对于Vue是一套渐进式框架的理解 ##

1.  每个框架都会有自己的一些特点，会对开发者有一定的要求，这些要求就是主张，主张有强有弱，它的强势程度会影响在业务开发中的使用方式。
2.  可以在原有大系统的上面，把一两个组件改用vue实现，也可以整个用vue全家桶开发不会做职责之外的事

## 对于Vue自底向上增量开发的设计的理解 ##

**先写一个基础的页面，把基础的东西写好，再逐一去添加功能和效果，由简单到繁琐的这么一个过程。**

## Vue.js 目的 ##

**Vue.js的产生核心是为了解决如下三个问题**

1.  解决数据绑定问题。
2.  Vue.js主要的目的是为了开发大型单页面应用。（Angular.js对PC端支持比较好，但对移动端支持就一般，而Vue.js主要是支持移动端，同时也支持PC端。）
3.  支持组件化，也就是可以把页面封装成为若干个组件，把组件进行拼装，这样是让页面的复用性达到最高。  
    ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MjAwMTg1_size_16_color_FFFFFF_t_70 1][]

## vue.js的核心思想 ##

**vue.js的核心思想包括：数据驱动和组件化。**

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MjAwMTg1_size_16_color_FFFFFF_t_70]: /images/20210724/cc25b8adb34a44539b9d4e8fa1b9bf5c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MjAwMTg1_size_16_color_FFFFFF_t_70 1]: /images/20210724/c582121c77d94ef693ceb84cea5f4e61.png