token的基本使用
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()
// 把登录页面放行,条件是当前路由处于登录页面并且不存在token
if (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