Token

1、定义

token：服务端生成的一串字符串，可以解决频繁登录的问题
它作为客户端进行请求的一个令牌：
第一次登录后，服务器生成一个token返回给客户端；
客户端只需要带上token来请求数据即可，无需再次带上用户名和密码

2、目的

为了减轻服务器的压力，减少频繁的查询数据库，使服务器更加健壮

3、使用(后端)

生成token的插件：jsonwebtoken
下载：cnpm install jsonwebtoken --save
引入：

var jwt = require('jsonwebtoken');
var str= "this is a mimi"; //创建token时进行加密的一个依据

创建token

function createToken(obj){obj.time=Date.now();  //时间戳return token=jwt.sign(obj,str,{expiresln:60*60});
}

验证token

function verifyToken(token){return new Promise((resolve,reject)=>{jwt.verify(token,str,(err,data)=>{if(err){reject(err)}else{resolve(data)}})})
}

4、使用(前端)

我们前端对于token的处理主要就是通过cookies第三方插件来设置token和删除token
下载：cnpm install js-cookie --save
引入：import cookies from "js-cookie"

设置token

export const setToken=(key,value,tokenExpires)=>{cookies.set(key,value,{expires:tokenExpires || 1})
}

获取token

export const getToken=(key)=>{return cookies.get(key)
}

删除token

export const removeToken=(key)=>{cookies.remove(key)
}

5、项目中的应用

在登录的时候，引入上面设置token的方法，在验证登录信息通过后，setToken(res.data.token,2)

使用axios拦截机

需要配合后台app.js中的token判断及登录拦截使用
在引入axios的文件request.js中，引入getToken和removeToken的方法

import axios from "axios"
import Setting from "./setting.js";
import { getToken, removeToken } from "./auth.js"
// 引入路由，用于下面的跳转登录
import router from "@/router"// 创建一个服务
const service = axios.create({baseURL: Setting.baseUrl,timeout: 5000
})// axios的请求拦截机--把token设置到请求头中
service.interceptors.request.use(config => {let token = getToken();// console.log(token);// console.log(config);if (token) {config.headers['authorization'] = token}return config}, error => {return Promise.reject(error)
})// axios的响应拦截机--主要就是把状态码对应的页面反映出来
service.interceptors.response.use(res => {// console.log(res);// 接收判断登录的状态码let status = res.data.status// console.log(status);switch (status) {case 200:// 说明登录成功return res.data;case 401:case 1001:case 1002:removeToken()router.replace({ path: '/admin/login' })break;default:break}}, error => {return Promise.reject(error)
})export default service

使用路由守卫

import Vue from "vue"
import VueRouter from "vue-router"
import { getToken } from "@/utils/auth.js"
// 引入routes模块
import routes from "./routes"
// 使用路由
Vue.use(VueRouter)//解决报错Navigation cancelled from “/userIndex“ to “/blank/login“ with a new navigati
const originalPush = VueRouter.prototype.push
const originalReplace = VueRouter.prototype.replace
// push
VueRouter.prototype.push = function push(location, onResolve, onReject) {if (onResolve || onReject) return originalPush.call(this, location, onResolve, onReject)return originalPush.call(this, location).catch(err => err)
}
// replace
VueRouter.prototype.replace = function push(location, onResolve, onReject) {if (onResolve || onReject) return originalReplace.call(this, location, onResolve, onReject)return originalReplace.call(this, location).catch(err => err)
}// 实例化一个路由对象
let router = new VueRouter({routes
})// 路由守卫--方法一
router.beforeEach((to, from, next) => {// console.log(from); //前一个路由// console.log(to);  //当前路由const token = getToken()// 把登录页面放行,条件是当前路由处于登录页面并且不存在tokenif (to.path !== "/admin/login" && !token) next("/admin/login")next()// 获取token值console.log(token);
})// 路由守卫--方法二
router.beforeEach((to, from, next) => {// console.log(from); //前一个路由// console.log(to);  //当前路由if (to.path == "/admin/login") {next()return;}const token = getToken()if (!token) return next("/admin/login")next()// 把登录页面放行,条件是当前路由处于登录页面并且不存在token// if (to.path !== "/admin/login" && !token) next("/admin/login")// next()// 获取token值console.log(token);
})// 暴露出去
export default router

token的基本使用相关推荐

golang通过RSA算法生成token，go从配置文件中注入密钥文件，go从文件中读取密钥文件，go RSA算法下token生成与解析；go java token共用
RSA算法 token生成与解析本文演示两种方式,一种是把密钥文件放在配置文件中,一种是把密钥文件本身放入项目或者容器中. 下面两种的区别在于私钥公钥的初始化, init方法,需要哪种取哪种. 通过 ...
SpringBoot2.3 修改响应头、添加更新token、解决在过滤器中修改失败
前言使用Spring Boot开发项目的过程中,难免会遇到向响应头中写入一些信息,例如更新了的token,用户详情等信息.在请求头中添加,请求时就可以通过过滤器,拦截器等验证或者获得请求头传递的信息 ...
[JAVA EE]session 和 token 机制
HTTP 协议是无状态的. 即服务器对于客户端每次发送的请求都认为它是一个新的请求. 本次请求和上次请求无法判断是不是同一个客户端操作的. 随着 Web 应用的发展,如在线购物网站,需要登录的网站等, ...
php token的生成和使用
原文连接:http://ukagaka.github.io/php/2018/05/08/JWT.html 1. 为什么要使用tokent进行登录前后端分离或者为了支持多个web应用,那么原来的co ...
token验证失败_ASP.NET CORE WEBAPI JWT 带BEARER的TOKEN
JWT主要由三部分构成,header. payload .signature,下面给出详细的TOKEN生成及使用代码. 1.注册JWT服务 public void ConfigureServices( ...
c# redis 如何设置过期时间_Redis Hash存储token、及设置过期时间
相信大家在很多业务场景都会遇到对数据设置过期时间,如安全认证token.短信验证码等.一般我们的解决有几种:存redis.存数据库.实时计算(如JWT),不管使用哪种方式,需求就是过期了对数据的清理. ...
php jwt token过期时间,php – 动态设置laravel jwt的到期时间
嗨,我在前端使用角度js,在后端使用带有tymon jwt库的卫星和laravel.我正在使用jwt身份验证.我想在我的网络应用程序中记住我的功能.我看到'ttl'在laravel'config / ...
php access token缓存,微信小程序PHP 生成access_token存入缓存
每个小程序都会对应后台的一系列接口.access_token一天2000次,每个有效期为2小时.所以可以保存到缓存中,每隔一段时间去获取一次. 把appid和secret放在全局配置文件中,方便调用 ...
php jwt使用案例,PHP使用JWT创建Token的实例详解
iss (issuer)issuer请求实体,可以是发起请求的用户的信息,也可是jwt的签发者 sub (Subject)设置主题,类似于发邮件时的主题 aud (audience)接收jwt的一方 ...
GitHub上传代码、更新代码、token设置
准备工作: 创建GitHub账号. 在本机电脑安装git工具. git配置用户名和邮箱打开git Bash,依此输入如下命令: git config --global user.name " ...

token的基本使用