Vue + ElementUI 实现后台管理系统模板 -- 前端篇(五):引入 js-cookie axios

2、token

3、安装、引入js-cookie

二、引入axios

1、简介

2、封装要求

3、安装并引入


一、引入js-cookie


1、简介

为了保存 token 值,可以使用 cookie 或者 localStorage 或者 sessionStorage 保存。

此处采用 cookie 进行保存,所以引入 js-cookie 插件,用于操作 cookie。

2、token

1》简单理解一下 token 是什么?

直译为 “令牌”,是由服务端生成的一串字符串,作为客户端进行请求的一个标识。

2》token 一般用在什么时候?

一般用于用户第一次登录系统时,服务端生成一个 token,返回给客户端,客户端下次请求时带上这个 token 发送请求,不用再带上用户名和密码,简化了验证操作。

3》为什么使用 token?

HTTP 协议是一种无状态的协议,客户端发送请求时,服务端并不知道是哪个客户端在访问。可以使用 用户名以及密码 唯一确定用户身份,但是每次响应请求时都要验证一下用户,这就很烦。

可以使用 session 以及 sessionId 的方式去解决,当客户登录系统时,服务端验证并生成一个记录保存在 session 中,并将这条记录的 id(即 sessionID) 返回给 客户端,客户端使用 cookie 或者 localStorage 保存,再次发送请求时,带上这个 sessionID,服务端响应并找到对应的记录进行验证。

可以使用 token 的方式解决,当客户登录系统时,服务端验证并返回一个 token 给客户端,客户端下次发送请求时,带上这个 token,服务端验证 token 即可。

4》session 与 token 区别?

session 存储是需要空间的(存储用户信息),服务器需要单独保存一份,以空间换时间。

token 可以不用存储用户信息,服务器不用保存(解密 token 即可),以时间换空间。

3、安装、引入js-cookie

1》安装

npm install js-cookies -S

2》引入

新建一个 auth.js 并引入,使用时引入 该 js 文件即可。

// 引入 token,此处直接引入,也可以在 main.js 中全局引入

import Cookies from ‘js-cookies’

// 设置 token 存储的 key

const TokenKey = ‘Admin-Token’

// 获取 token

export function getToken() {

return Cookies.getItem(TokenKey)

}

// 设置 token

export function setToken(token) {

return Cookies.setItem(TokenKey, token)

}

// 移除 token

export function removeToken() {

return Cookies.removeItem(TokenKey)

}

二、引入axios


1、简介

想要发送 ajax 请求,vue 项目中一般使用 axios,使用起来虽然简单,但如果不进行统一封装,随着项目越来越大,冗余代码会急剧增加,所有需要对 axios 进行二次封装,使各个组件间能够复用 axios,简化代码。

2、封装要求

统一 url 配置(可以与代理结合起来使用解决跨域问题)。

定义请求拦截器(request),比如:设置消息头、设置 token 等。

定义响应拦截器(response),比如:统一错误处理、页面重定向 等。

3、安装并引入

1》安装

npm install axios -S

2》引入

新建request.js 引入,使用时引入 该 js 文件即可。

import Vue from ‘vue’

import {

getToken,

removeToken

} from ‘./auth.js’

import router from ‘@/router’

import {

Message

} from ‘element-ui’

import axios from ‘axios’

// 创建 axios 实例

const http = axios.create({

// 统一 url 配置,定义访问前缀 baseURL

baseURL: ‘/api’,

// 定义请求超时时间

timeout: 10000,

// 请求带上 cookie

withCredentials: true,

// 定义消息头

最后

除了简历做到位,面试题也必不可少,整理了些题目,前面有117道汇总的面试到的题目,后面包括了HTML、CSS、JS、ES6、vue、微信小程序、项目类问题、笔试编程类题等专题。

  • 3
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值