login_push

يستخدم Vue+Koa2 jwt لتنفيذ تسجيل الدخول الموحد ؟

---

2018-12-17

هذا التحديث README يهدف بشكل أساسي إلى تعويض اتصالات الصور المعطلة.

من وجهة نظري الشخصية، أنا أحب هذا النوع من المشاريع الكاملة، فهو عملي للغاية. لا داعي لإلقاء نظرة على الكود الخاص بي، يمكنك كتابة ما يجب فعله مباشرة على الرغم من أنه يبدو بسيطًا جدًا على الصفحة ، هناك العديد من نقاط المعرفة

• كيفية استخدام jsonwebtoken في الممارسة العملية؟
• التحكم في توجيه تسجيل الدخول الموحد
• كيفية استخدام koa2 لبناء بيئة تطوير خلفية ترضيك
• افهم mongodb وأكمل المقدمة وافهم الاستخدام العام لواجهة برمجة التطبيقات (API).
• تمامًا مثل الواجهة الأمامية Vue React وما إلى ذلك، كلما كتبت أكثر، أصبحت أكثر كفاءة.

كيف يعمل؟

البيئة المطلوبة:安装并启动的mongodb npm (إذا كانت هناك مشكلة في البيئة، فلن يبدأ بالتأكيد)

git clone https://github.com/vkcyan/login_push.git

// 服务端
cd server
npm install
npm install start

//客户端
cd client
npm install
npm install start

(العميل) العميل:

• vue
• vue-router
• أكسيوس
• عنصر
• jsonwebtoken

(الخادم) الخادم

• koa2
• koa-bodyparser
• koa-router
• MD5
• النمس
• مساء2

ما هي الوظائف التي يتم تنفيذها؟

• تسجيل الدخول
• يسجل
• تسجيل الخروج
• todolist إضافة حذف تعديل العرض
• عملية todolist متعددة التحديد

وضع التحقق من صحة JWT

هنا يتم تخزين الرمز المميز في localStorage . هناك طريقة أخرى وهي حفظه في ملف تعريف الارتباط. قد يتغير الرمز قليلاً، لكن التأثير هو نفسه تمامًا.

تسجيل الدخول

التسجيل

com.todolist

أفكار حول التحكم في التوجيه

 router . beforeEach ( ( to , from , next ) => {
  let token = localStorage . getItem ( 'token' ) // 获取token

  if ( to . name == 'login' ) { // 假如登录 判断token是不是存在 存在让他跳转到主页面
    verification ( token , next )
    . then ( ( data ) => {
      if ( data . data . type ) { // type 为1 直接跳过登录
        Message ( {
          showClose : true ,
          message : '您已经登录,重新登录请退出账户'
        } ) ;
        next ( '/todolist' )
      } else {
        next ( )
      }
    } )
  }

  if ( to . name == 'todoList' ) {
    verification ( token , next )
    . then ( ( data ) => {
      if ( data . data . type ) {
        // type 为1说明token没有失效
        // 跳转到主页面
        next ( )
      } else {
        // token失效 强制定位到登录页面
        if ( token === null ) { // 说明从来没有登陆过
          Message ( {
            showClose : true ,
            message : '您还没有登录' ,
            type : 'warning'
          } )
          next ( '/login' )
        } else {
          Message . error ( '登录信息失效' )
          next ( '/login' )
          localStorage . removeItem ( 'token' )
        }
      }
    } )
    . catch ( ( data ) => {
      console . log ( data ) ;
    } )
  }

  if ( to . meta . title ) {
    document . title = to . meta . title
  }
} )



// 验证
let verification = ( token , next ) => {
  return axios . post ( '/api/verification' , { token } )
}

واجهة التحقق الموحدة للواجهة الخلفية /api/verification ، تحدد كل قفزة توجيه ما إذا كانت صلاحية الرمز المميز قد انتهت صلاحيتها أو تم تغييرها.

دون تسجيل الدخول

عند عدم وجود رمز تسجيل الدخول الأول، يجب أن تستجيب الواجهة الخلفية بـ 0 وتمريرها مباشرة.

إذا لم تقم بتسجيل الدخول، انتقل إلى الصفحة بعد تسجيل الدخول. إذا لم تقم بتسجيل الدخول، فستتم مطالبتك بالرمز المميز بشكل منفصل.

 if ( token === null ) { // 说明从来没有登陆过
          Message ( {
            showClose : true ,
            message : '您还没有登录' ,
            type : 'warning'
          } )
          next ( '/login' )
        } else {
          Message . error ( '登录信息失效' )
          next ( '/login' )
          localStorage . removeItem ( 'token' )
        }

هذا يعني أن نوع login يجب أن يكون 0، حتى التالي ()

عند تسجيل الدخول

الرمز موجود بالفعل والنوع هو 1. عند الوصول إلى /todoList ، next()

قم بزيارة /login ، واكتب 1، ثم انتقل إلى /todolist ، وأعطي المستخدم مطالبة

 if ( data . data . type ) { // type 为1 直接跳过登录
  Message ( {
    showClose : true ,
    message : '您已经登录,重新登录请退出账户'
  } ) ;
  next ( '/todolist' )
} else {
  next ( )
}