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

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

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文件，代码如下：