vue token登录注册闭环

注册 一

前台

get请求

<template>
  <div id="app">
    <h1>注册页面</h1>
    <input type="text" placeholder="用户名" v-model="input1"><br/>
     <input type="password" placeholder="密码" v-model="input2"><br/>
     <button @click="fun()">注册</button>
     <p v-if="bool">注册成功{{num}}秒后跳转到登录页面</p>
    <router-view/>
  </div>
</template>
<script>
import {getlink} from "@/api/getapi.js"
export default {
      data(){
        return{
            input1:"",
            input2:"",
            bool:false,
            num:3,
        }
      },
     methods:{
       fun(){
         getlink("api/demob/zhuce",{name:this.input1,age:this.input2}).then((ok)=>{
            console.log(ok.data.data.zhuceid)
             if(ok.data.data.zhuceid==1 && this.inputa!=="" && this.inputb!==""){
                    this.bool=true
                    setInterval(()=>{
                        this.num--;
                        if(this.num==0){
                            this.$router.push("/login")
                        }
                    },1000)
                }else{
                    alert("请输入账号或密码");
            }
         })
       }
     },
   
}
</script>

<style>

</style>

后台

//注意：后台注册地址已在中间件(index.js,可将多个接口连接再一起)
let express=require("express");
let db = require("../db/index.js")
let router=express.Router()

router.get("/zhuce",(req,res)=>{
    let userdata = new db({   
        name: req.query.name, //用户名
        age: req.query.age//密码
    })

    //后台将前台发送过来的数据存入数据库
    userdata.save().then((ok) => {
        console.log(ok)
        res.send({mag:"我是注册的接口",data:{zhuceid:1}})
    }).catch((err)=>{
        console.log(err)
        res.send({mag:"我是注册的接口",data:{zhuceid:0}})
    })
    //接收前台发过来的数据
    console.log(req.query.name+"-----"+req.query.age);
  
})

// 4.暴露
module.exports=router

登录 一

前台

post请求

<template>
  <div>
      <h1>欢迎来到登录页面</h1>
        <div class="clone">
           <input type="text" v-model="inputa" placeholder=" 用户名"/>
            <br>
           <input type="password" v-model="inputb" placeholder="  密码"/>
            <br>
          <button @click="fun()">点击登录</button>
        </div>
  </div>
</template>
<script>
import {postlink} from "@/api/postapi.js"
export default {
    data(){
      return {
          inputa:"",
          inputb:"",
       }
    },
    methods:{
      fun(){
         let usp=new URLSearchParams();
          usp.append("name",this.inputa);
          usp.append("age",this.inputb);
          postlink("api/demoa/denglu",usp).then((ok)=>{
            console.log(ok.data.data.dengluid)
              if(ok.data.data.dengluid==1){
                  //token
                  //在登录成功的时候把token存到本地存储(localstrong)
                  window.localStorage.setItem("token",ok.data.data.token)
                   this.$router.push("/home")
              }else{
                alert("账号或密码错误")
              }
          })
      }
    }
}
</script>

<style>

</style>

后台

let express=require("express");
let userdb=require("../db/index.js")
let router=express.Router();
let jwt=require("jsonwebtoken")


// 2.引用bodyparser
let bodyParser=require("body-parser")
// 3.开启解析功能
let bp=bodyParser.urlencoded({extended:false})
// 4.把解析功能传入
router.post("/denglu",bp,(req,res)=>{
   
    // 接收post数据
    // 1.下载body-parser的中间件   帮助express来解析post数据cnpm install --save body-parser
    console.log(req.body.name+"----"+req.body.age)
    //接受前台发过来的数据并在数据库查询
    userdb.find({name:req.body.name,pwd:req.body.pwd,}).then((ok)=>{
        console.log(ok)
        if(ok.length===0){
            res.send({mag:"我是登录的接口",data:{dengluid:0}})
        }else{
            // 登录的时候生成token
            // 生成语法：sign(你要加密的内容,密钥(自己随便定义，越乱越好))
            // 下载jsonwebtoken
            //引用jsonwebtoken
            //开始生成token token token
            let obj={
                loginid:1
            }

             let mi="asjoifjopiwejfpgoiejwpgoie"//生成密钥
             let token=jwt.sign(obj,mi)//生成token
             //把token给前台
             res.send({mag:"我是登录的接口",data:{dengluid:1,token}})
        }
    })
})

module.exports=router

退出登录

退出时删除token,与上面登录联用

<template>
  <div>
      首页首页首页首页首页首页首页首页
      <button @click="fun()">退出登录</button>
  </div>
</template>

<script>
export default {
    methods:{
      fun(){
        if(window.confirm("是否退出")){
            //退出的时候删除token
            window.localStorage.removeItem("token");
            this.$router.push("/login");
        }
    }
  }
}
</script>

<style>

</style>

登录状态的判断 前台

在路由中配合守卫进行，将接收到的token再返回给后台，后台接受之后进行解密，判断是否登录。

import Vue from 'vue'
import VueRouter from 'vue-router'
import {getlink} from "@/api/getapi.js"

Vue.use(VueRouter)

const routes = [
  {
    path: '/login',
    name: 'Login',
    component: () => import('../views/login.vue')
  },
  {
    path: '/clone',
    name: 'Clone',
    component: () => import('../views/clone.vue')
  },
  {
    path: '/home',
    name: 'Home',
    component: () => import('../views/home.vue')
  },
    // 重定向
    {
      path:"/",//当路径为空的时候
      redirect:"/clone"//把当前的路径切换成/shop（就是默认显示的页面）
    },
    // {
    //   path: '/*',//路径用星号，表示通配符选择器，所有的都能匹配到
    //   name: 'No',
    //   component: () => import( '../views/no.vue')//
    // },
    

]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})


router.beforeEach((to,from,next)=>{
  // 登录和注册页面需要判断是否登录过吗？
if(to.path=="/login"||to.path=="/clone"){
  next()
}else{
    // else就是不是登录和注册  我就需要判断用户是否登陆过没有
    // 1.得到token
    let token=window.localStorage.getItem("token")
    // 2.把得到的token发送给后台专门解密token的接口中
    getlink("/api/tokenb",{usertoken:token}).then((ok)=>{
      console.log(ok.data.dengluid)
      if(ok.data.dengluid==1){
        next()
      }else{
        alert("您没有登录！请您登录后访问")
        next("/login")
      }
    })
}

})


export default router

后台 接收前台返回的token，并且解密

// 解密token的测试接口
app.get("/tokenb",(req,res)=>{
    // let token="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJuYW1lIjoi5oiR5pivdG9rZW7nmoRuYW1lIiwiYWdlIjoi5oiR5pivdG9rZW7nmoRhZ2UiLCJpYXQiOjE2Mjc5NTQ0ODN9.hoPiyNN2yTfmieEfCtyqZWzUpPOKzifHZc0f8OVcB6M"

    let token=req.query.usertoken//接受前台返回的token

    if(token==null){ 
         res.send({msg:"用户没有登陆过",dengluid:0}) 
    }
    // let mi="oasduixcviuywertpofasdoh"
    let mi="azxcoiusvdfiouywsedrfkhbj"

    jwt.verify(token,mi,(err,data)=>{
        console.log(err);//成功的时候返回null
        console.log(data);
        if(data.dengluid==1){
            res.send({msg:"用户登陆过",dengluid:1})
        }else{
            res.send({msg:"用户没有登陆过",dengluid:0})
        }
    
    })
 
})


app.listen(3000)

写完整后台详细步骤

1，建立一个serve的文件夹
下载 cnpm install --save express（用于搭建一个后台服务，写接口时要引用）
cnpm install --save mongoose （用于操作 mongdb数据库）
2,serve下建立一个db文件夹，里面一个index.js文件，用于存放数据库连接的代码。
3 serve下建立一个routers的文件夹，里面写多个.js接口文件，在它的同级建立一个index.js文件，用于将它里面的多个.js接口文件连接在一起，并且配置接口地址