Git Product home page Git Product logo

vue-koa2-login's Introduction

使用 VueJS & NodeJS 实现基于 token 的登录注册

前言:

需要耐心,需要耐心,我在代码写了很多注释,你需要的是耐心阅读。能学到前后端很多东西。 项目总你发现有些东西其实是绕了远路的,但并不妨碍学习反而能学到更多的知识点。

技术栈:

  • vue 2.X
  • vuex
  • vue-router
  • element-ui
  • axios
  • koa2
  • mongoose
  • jsonwebtoken

功能:

用户输入网站进入localhost:8000/,由于没有登录直接跳转到/login页面,登录完成后自动跳转到主页并能进行其他操作。

运行环境:

由于用的是koa2,所以请在官网下载最新版本,我用的是7.8.0版本。建议下载个nvm,它是window下管理node版本的工具,非常好用,只需几个命令就能随时切换node版本
项目目录是用vue-cli搭建。然后自己在里面新建了server.js和server文件夹来写后端代码。不能少一步就是在config/index.js配置代理

proxyTable: {
      '/api': {
				target: 'http://localhost:8888',
				changeOrigin: true
			}
    }

运行项目

前提条件:mongodb服务是挂起来的

//第一步
cd vue-koa2-login
//第二步
cnpm install
//第三步
npm run dev
//第四步:挂起mongodb
mongod --dbpath XXXX(可以随便建个文件夹,这里是该文件夹的地址,将来用来存放数据)
//第五步
node server.js

关键代码一:

所有需要登录的路由在配置路由时都需加上:

meta: {
            requireAuth: true // 添加该字段,表示进入这个路由是需要登录的
        }
//注册全局钩子用来拦截导航
router.beforeEach((to, from, next) => {
  //获取store里面的token
  let token = store.state.token;
  //判断要去的路由有没有requiresAuth
  if(to.meta.requiresAuth){
    if(token){
      next();
    }else{
      next({
        path: '/login',
        query: {redirect: to.fullPath}  // 将跳转的路由path作为参数,登录成功后跳转到该路由
      });
    }
  }else{
    next();//如果无需token,那么随它去吧
  }
});

关键代码二

拦截器可以做到统一处理所有利用axios发送的请求

//request拦截器
instance.interceptors.request.use(
    config => {
        if(store.state.token){
            config.headers.Authorization = `token ${store.state.token}`;
        }
        return config;
    },
    err => {
        return Promise.reject(err);
    }
);
//respone拦截器
instance.interceptors.response.use(
    response => {
        return response;
    },
    error => { //默认除了2XX之外的都是错误的,就会走这里
        if(error.response){
            switch(error.response.status){
                case 401:
                    store.dispatch('UserLogout'); //可能是token失效,清楚它
                    router.replace({ //跳转到登录页面
                        path: 'login',
                        query: { redirect: router.currentRoute.fullPath } // 将跳转的路由path作为参数,登录成功后跳转到该路由
                    });
            }
        }
        return Promise.reject(error.response.data);
    }
);

关于token的存储问题:

store,localStorage,sessionStorage三者皆可,看需求

分享阅读的资料及源码:

资料:
学习koa2
学习JSON Web Token1
学习JSON Web Token2
学习JSON Web Token3

学习的源码:
一个项目学会前端实现登录拦截
vue-login
vue-koa2-blog

vue-koa2-login's People

Watchers

James Cloos avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.