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