路由守卫 AJAX,vue路由导航守卫和请求拦截以及基于node的token认证的方法
vue路由导航守卫和请求拦截以及基于node的token认证的方法
发布时间:2020-09-04 21:21:40
来源:脚本之家
阅读:119
作者:阿踏
什么时候需要登录验证与权限控制
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: ''
})
上面代码中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是否失效,如果失效则跳到登陆页面
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持亿速云。
路由守卫 AJAX,vue路由导航守卫和请求拦截以及基于node的token认证的方法相关推荐
- 路由守卫 AJAX,vue路由导航守卫 和 请求拦截以及基于node的token认证
#####什么时候需要登录验证与权限控制 1.业务系统通常需要登录才能访问受限资源,在用户未登录情况下访问受限资源需要重定向到登录页面: 2.多个业务系统之间要实现单点登录,即在一个系统或应用已登录的 ...
- VUE全局导航守卫、 请求、响应拦截器 的设置
文件设置参考地址:https://gitee.com/wang_yu5201314/headlines__news/tree/master/%E9%A1%B9%E7%9B%AE%E6%BA%90%E7 ...
- Vue--》深入理解 Vue 3 导航守卫,掌握前端路由的灵魂技能!
目录 vue3导航守卫讲解与使用 element-ui的安装与使用 配置路由和设置路径别名
- vue 传递 对象 路由_vue 04 -vue路由对象($route)参数简介以及和router的区别
vue路由对象($route) 在使用了 vue-router 的应用中,路由对象会被注入每个组件中,赋值为 this.$route ,并且当路由切换时,路由对象会被更新. so , 路由对象暴露了以 ...
- vue重复路由_解决vue路由name同名,路由重复的问题
在项目中,想让路由后缀为空,或者index的时候,都跳转到路由为index的页面,于是在router中如下配置 routes: [{ path: '/', name: 'index', compone ...
- vue 设置路由导航守卫 控制路由跳转
在实际项目中,通常有这样的需求,在用户没有登录的时候通常时不允许访问除了登录页面之外的页面,这个时候就需要使用路由导航守卫来控制跳转了,通常设置如下 在router文件夹下的index.js中添加如下 ...
- 十、vue-router学习笔记——认识路由、vue-router基本使用、vue-router嵌套路由、vue-router参数传递、vue-router导航守卫、keep-alive
一.认识路由 1.1 什么是路由? 说起路由你想起了什么? 路由是一个网络工程里面的术语. 路由(routing)就是通过互联的网络把信息从源地址传输到目的地址的活动. - 维基百科 额, 啥玩意? ...
- 创建vue项目(四)路由相关知识、路由守卫、插槽、打包小细节
一.路由相关点 1. 路由跳转传参以及接参 https://segmentfault.com/a/1190000012393587 方法一: (1) 参数配置: { path : 'xx/:参数变量' ...
- 路由导航守卫 - 前置导航守卫 router.beforeEach
一.导航守卫 1.什么是导航守卫? 导航守卫就是路由跳转过程中的一些钩子函数,在通过函数中通过跳转或取消的方式守卫导航. 2.导航守卫分为几种? 前置导航守卫 router.beforeEach 后置 ...
- 55. VUE 导航守卫
就是 如果你想跳转路由的时候干点什么 那么就用导航守卫,例如更换标题,当然你可以用生命周期函数,在我看来不切实际. 点击首页标题换首页 ,点击个人 标题换个人: 全局导航守卫 vue-router提 ...
最新文章
- 为什么7层负载均衡压测性能低
- 3kyu Path Finder #3: the Alpinist
- ML之KMeans:利用KMeans算法对Boston房价数据集(两特征+归一化)进行二聚类分析
- sql 写query_为什么需要动态SQL
- [ZJOI2016]小星星
- BAT文件命名中含有英文括号运行出错
- Java 高级特性 --- 反射
- 一个寄存器有几个字节_STM32f103ZET6 学习资料 (连载2 寄存器的操作界限)
- 异常收集之:navicatdesignquery.sql.bak 系统找不到指定路径
- 使用 Task 简化异步编程
- Python操作Redis:键(Key)
- angularJs模版注入的两种方式
- 解决屏蔽JS代码报错的问题
- matlab仿真软件 R2017a版本下载
- 计算机软件配置项csci
- Bus Hound 使用指南
- 股票做手回忆录中的精华
- 谁说淘宝客不赚钱?用此招,票子流量手到擒来!
- 软件企业配置管理过程
- Python 京东抢购茅台脚本(亲测可用),github脚本24小时内删除