vue路由导航守卫和请求拦截以及基于node的token认证的方法


Posted in Javascript onApril 07, 2019

什么时候需要登录验证与权限控制

1、业务系统通常需要登录才能访问受限资源,在用户未登录情况下访问受限资源需要重定向到登录页面;

2、多个业务系统之间要实现单点登录,即在一个系统或应用已登录的情况下,再访问另一个系统时不需要重复登录;在登录过期或失效时,需要重定向到登录页面

如何使用路由守卫

定义一个index.js页面用来定义页面的路由,代码如下:

import Vue from 'vue'
import Router from 'vue-router'
import blogIndex from '@/views/index'
import loginComponent from '../components/common/login'
Vue.use(Router)
const routes = [
 {
  path: '/blog',
  name: 'blogIndex',
  component: blogIndex
 },
 {
  path: '/login',
  name: 'login',
  component: loginComponent
 }
];
const router = new Router({
 mode: 'hash', // mode的值为history的时候不需要#,为hash的时候需要
 routes
});
export default router;

定义一个guarder.js页面用来定义页面的路由,代码如下:

import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
export default function (router) {
  router.beforeEach((to, from, next) => {
   NProgress.start()
   console.log(to.path, '121212');
   if(localStorage.getItem("useName") === 'null' && to.path !== '/login') {
    console.log(to.path, 'totototototototo2');
    next({path: '/login'})    
   }else{
    next()
   }
  });
  router.afterEach((to, from) => {
    NProgress.done()
  })
}

这里使用的方法是当用户登陆的时候将用户名保存到本地,判断用户名是否存在,不存在则跳到登陆页面

然后再main.js里面引入guarder.js文件

// 注入路由守卫
import guarder from './help/guarder'
// 注册路由守卫
guarder(router)

这样在前端就可以达到一个路由拦截的作用

node配合http拦截做token认证

要做token认证就必须要有token,安装jsonwebtoken模块,cnpm i jsonwebtoken --save

在node的路由模块引入

var jwt = require("jsonwebtoken");
// 登陆
Router.post('/login',function(req,res,next){
  let params = {
    useName: req.body.useName,
    passWord: req.body.passWord,
  };
  userModel.find(params,function(err,doc){
   if(err) {
      res.json({
        states: 0,
        msg: err.message
      });
    }else {
      // 下面代码在登陆成功的时候生成token并返回给前端,前端登陆成功后保存到本地
        let token = jwt.sign(params, '123456', {
            expiresIn: 60*60*1 //token的是时长,这里的12345是密钥,可以自己定义
        });
        console.log(token, 'tokentokentokentokentoken');
        res.json({
          states: 1,
          msg: doc,
          token: token
        });
      }
    }
  });
});

定义一个http.js文件,代码如下:

import axios from 'axios'
import router from '../router'
/**
 * 在请求发送数据之前,对发送数据进行转换
 */
axios.interceptors.request.use(function (config) {
  // 在这里实现对请求前的处理
  let token = localStorage.getItem("token");
  if(token !== 'null'){
    config.headers.token = token;
    // config.headers.Authorization = `token ${sessionStorage.getItem('token')}`
  }
  // console.log(config,'configconfigconfigconfigconfig');
  return config
 })
 
 /**
  * 在ajax接收响应数据之前,进行判断是否响应未登录、如果未登录重定向到登录页面
  */
 axios.interceptors.response.use(function (res) {
  // 在这里实现响应后的处理
  console.log(res.data.status,'resresresresresresres');
  if(res.data.status === 0) {
    router.replace({
      path: 'login'
    })
  }
  return res
 })

 export default axios

在main.js里面引入http模块,并注入到vue实例中

import http from './help/http'
new Vue({
 el: '#app',
 router,
 store,
 http,
 components: { App },
 template: '<App/>'
})

上面代码中request部分,判断是否存在token,并将token存入请求头里面,肉厚后端接受这个token

// 获取最近登陆
Router.post('/getNewUser',function(req,res,next){
  console.log(req.headers.token, 'req.headerreq.headerreq.header');
  let params = {};
  let newUser2 = newUserModel.find(params).skip(0).limit(10).sort({_id:-1});
  newUser2.exec(function(err,doc){
    if(err) {
       res.json({
         states: 0,
         msg: err.message
       });
     }else {
      let token = req.headers.token; // 从headers中获取token
      //下面为解密,判断token是否失效,并返回一个status状态
      jwt.verify(token, '123456', function (err, decode) {
        if (err) { // 时间失效的时候/ 伪造的token 
          res.json({
            states: 1,
            msg: doc,
            status: 0
          });    
          // res.send({'status':0});      
        } else {
          res.json({
            states: 1,
            msg: doc,
            status: 1
          });  
        }
      })
      // res.json({
      //   states: 1,
      //   msg: doc
      // });
     }
  });
 });

上面代码中response部分,接收返回的status来判断token是否失效,如果失效则跳到登陆页面

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript 键盘事件的组合使用实现代码
May 04 Javascript
Javascript级联下拉菜单以及AJAX数据验证核心代码
May 10 Javascript
js jquery获取随机生成id的服务器控件的三种方法
Jul 11 Javascript
基于jquery的文字向上跑动类似跑马灯的效果
Sep 22 Javascript
javascript实现tab切换特效
Nov 12 Javascript
利用python分析access日志的方法
Oct 26 Javascript
JS正则表达式修饰符中multiline(/m)用法分析
Dec 27 Javascript
Javascript中for循环语句的几种写法总结对比
Jan 23 Javascript
微信小程序 仿美团分类菜单 swiper分类菜单
Apr 12 Javascript
JSON在Javascript中的使用(eval和JSON.parse的区别)详细解析
Sep 05 Javascript
微信小程序自定义弹窗wcPop插件
Nov 19 Javascript
解决vue组件销毁之后计时器继续执行的问题
Jul 21 Javascript
vue自定义指令directive的使用方法
Apr 07 #Javascript
浅谈express.js框架中间件(middleware)
Apr 07 #Javascript
详解vue中this.$emit()的返回值是什么
Apr 07 #Javascript
浅谈javascript中的prototype和__proto__的理解
Apr 07 #Javascript
javascrit中undefined和null的区别详解
Apr 07 #Javascript
详解服务端预渲染之Nuxt(介绍篇)
Apr 07 #Javascript
vue设计一个倒计时秒杀的组件详解
Apr 06 #Javascript
You might like
php写的带缓存数据功能的mysqli类
2012/09/06 PHP
wordpress安装过程中遇到中文乱码的处理方法
2015/04/21 PHP
PHP的mysqli_rollback()函数讲解
2019/01/23 PHP
Javascript 获取LI里的内容
2008/12/17 Javascript
屏蔽IE弹出&quot;您查看的网页正在试图关闭窗口,是否关闭此窗口&quot;的方法
2013/12/31 Javascript
input禁止键盘及中文输入,但可以点击
2014/02/13 Javascript
通过url查找a元素并点击
2014/04/09 Javascript
AngularJS初始化过程分析(引导程序)
2014/12/06 Javascript
JS中setTimeout的巧妙用法前端函数节流
2016/03/24 Javascript
Bootstrap媒体对象的实现
2016/05/01 Javascript
bootstrap布局中input输入框右侧图标点击功能
2016/05/16 Javascript
js中获取jsp表单中radio类型的值简单实例
2016/08/15 Javascript
Vue组件中的data必须是一个function的原因浅析
2018/09/03 Javascript
微信小程序仿知乎实现评论留言功能
2018/11/28 Javascript
node静态服务器实现静态读取文件或文件夹
2019/12/03 Javascript
js+canvas实现简单扫雷小游戏
2021/01/22 Javascript
HTML+JS实现“代码雨”效果源码(黑客帝国文字下落效果)
2020/03/17 Javascript
three.js显示中文字体与tween应用详析
2021/01/04 Javascript
[16:43]Heroes19_剃刀(完美)
2014/10/31 DOTA
[48:31]完美世界DOTA2联赛PWL S3 DLG vs Phoenix 第二场 12.17
2020/12/19 DOTA
Python实现pdf文档转txt的方法示例
2018/01/19 Python
pandas 读取各种格式文件的方法
2018/06/22 Python
Python3爬楼梯算法示例
2019/03/04 Python
python中用logging实现日志滚动和过期日志删除功能
2019/08/20 Python
python3中利用filter函数输出小于某个数的所有回文数实例
2019/11/24 Python
python中def是做什么的
2020/06/10 Python
Pytest测试框架基本使用方法详解
2020/11/25 Python
Bergfreunde丹麦:登山装备网上零售商
2017/02/26 全球购物
Space NK英国站:英国热门美妆网站
2017/12/11 全球购物
廉价航班、机票和酒店:JustFly
2018/02/07 全球购物
Under Armour安德玛意大利官网:美国高端运动科技品牌
2020/01/16 全球购物
四年大学生活的自我评价范文
2014/02/07 职场文书
人事文员岗位职责
2014/02/16 职场文书
企业文化标语口号
2014/06/09 职场文书
幼儿园户外活动总结
2014/07/04 职场文书
副乡长民主生活会个人对照检查材料思想汇报
2014/10/01 职场文书