什么時(shí)候需要登錄驗(yàn)證與權(quán)限控制

1、業(yè)務(wù)系統(tǒng)通常需要登錄才能訪問(wèn)受限資源，在用戶未登錄情況下訪問(wèn)受限資源需要重定向到登錄頁(yè)面；

2、多個(gè)業(yè)務(wù)系統(tǒng)之間要實(shí)現(xiàn)單點(diǎn)登錄，即在一個(gè)系統(tǒng)或應(yīng)用已登錄的情況下，再訪問(wèn)另一個(gè)系統(tǒng)時(shí)不需要重復(fù)登錄；在登錄過(guò)期或失效時(shí)，需要重定向到登錄頁(yè)面

如何使用路由守衛(wèi)

定義一個(gè)index.js頁(yè)面用來(lái)定義頁(yè)面的路由，代碼如下：

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的時(shí)候不需要#，為hash的時(shí)候需要 routes});export default router;

定義一個(gè)guarder.js頁(yè)面用來(lái)定義頁(yè)面的路由，代碼如下：

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()  })}

這里使用的方法是當(dāng)用戶登陸的時(shí)候?qū)⒂脩裘４娴奖镜兀袛嘤脩裘欠翊嬖冢淮嬖趧t跳到登陸頁(yè)面

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

// 注入路由守衛(wèi)import guarder from './help/guarder'// 注冊(cè)路由守衛(wèi)guarder(router)

這樣在前端就可以達(dá)到一個(gè)路由攔截的作用

node配合http攔截做token認(rèn)證

要做token認(rèn)證就必須要有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 {      // 下面代碼在登陸成功的時(shí)候生成token并返回給前端，前端登陸成功后保存到本地        let token = jwt.sign(params, '123456', {            expiresIn: 60*60*1 //token的是時(shí)長(zhǎng)，這里的12345是密鑰，可以自己定義        });        console.log(token, 'tokentokentokentokentoken');        res.json({          states: 1,          msg: doc,          token: token        });      }    }  });});

定義一個(gè)http.js文件，代碼如下：