一、vue无感刷新token
干前端工作也有一小段时间了。这不,研究了下vue项目里的无感刷新。可能有经验的大佬都知道也会敲。大佬就略过吧。
vue无感刷新,大致的原理就是后端返回两个token给前端。(一个是请求的token,另一个是到期或者快到期后换取新token的那个token)
//utils/request.js
import axios from 'axios'
import { MessageBox, Message } from 'element-ui'
// create an axios instance
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
// withCredentials: true, // send cookies when cross-domain requests
timeout: 5000 // request timeout
})
const requestFreshToken = axios.create({
baseURL: process.env.VUE_APP_BASE_API,
timeout: 5000
})
// request interceptor
service.interceptors.request.use(
config => {
let urlArr = ['api/login']
let url = config.url
if (urlArr.indexOf(url) == -1) {
let access_token = localStorage.getItem('access_token')
config.headers.access_token = access_token
}
return config
},
error => {
if (error.response.status == 401) {
console.log('qqq')
}
return Promise.reject(error)
}
)
// response interceptor
service.interceptors.response.use(
response => {
let data = response.data;
Message({
message: data.msg,
type: 'success',
duration: 5 * 1000
})
return data
},
async(error) => {
let data = error.response.data;
let status = error.response.status;
if (status == 401) {
let refresh_token = localStorage.getItem('refresh_token')
let newTookenObj = await requestFreshToken({
method: 'post',
data: { refresh_token: refresh_token },
url: 'api/token/setToken'
})
let data = newTookenObj.data
if (!data.bol) {
Message({
message: data.msg,
type: 'error',
duration: 5 * 1000
})
return data
}
let access_token = data.access_token;
let refresh_token_new = data.refresh_token;
localStorage.setItem('access_token', access_token)
localStorage.setItem('refresh_token', refresh_token_new)
return service(error.config)
} else {
Message({
message: data.msg,
type: 'error',
duration: 5 * 1000
})
return data
}
}
)
export default service
二、vue打包nginx配置上线
1、打包我就不说了吧想必大家都知道
npm run build
2、重点就是在nginx的配置
server{
listen 99;
server_name localhost;
root D:\xiaobing\study\vue\my-project-vue2\dist;
location / {
try_files $uri $uri/ @router;
index index.html;
add_header cache-Control no-cache;
}
location /api {
#proxy_set_header Host $host;
proxy_pass http://127.0.0.1:3000;#此处修改为自己的请求地址
#rewrite ^.+api/?(.*)$ /$1 break;
#include uwsgi_params;
}
location @router {
rewrite ^.*$ /index.html last;
}
}
三、请求封装
//import axios from 'axios'
import url from "postcss-url"
import service from "../utils/request"
export function login(data) {
//data = {user_name:"xiaobing" , password:"123456"}
return service({
url: 'api/login',
data: data, //注意此处的key
method: 'post'
})
}
export function getUserInfo(data) {
//data = {id:5 , name:'xiaobing'}
return service({
url: 'api/user/getUserInfo',
params: data, //注意此处的key
method: 'get'
})
}
export function userUpdate(id, data) {
//data = {id:5 , name:'xiaobing'}
return service({
url: 'api/user/update/' + id,
data: data,
method: 'put'
})
}
四、数据已更新,但页面常渲染的数据并没有更新的解决方法
this.shopCar.count[category - 1]++ //在js代码中对需要修改的数据进行编写后,只需要在下一行编写如下代码
this.$forceUpdate() //这段代码的意思是“强制刷新”的意思
五、局部样式的修改(针对某个页面,不影响其他页面)
其实, 有很多时候,我们需要对某个页面的样式进行修改,但并不影响基其他页面的样式。在这个时候,我们可以在style标签里面添加如下
<style lang="less" scoped>
/deep/ .el-button{
//css样式
}
</style>
当然,如果在这种无法生效的时候,我们还可以把css写在js里面,代码如下
beforeCreate(){ //注意,这个需要跟 data 、created() 同一级
//下面的代码应该可以看得懂
document.querySelector('body').setAttribute('style', 'zoom:0.4;')
}
六、this.$nextTick()的理解
简单的来理解,nextTick函数是在dom加截完后才执行。或者,我们这样子去想,假设我们有个需求,是需要在dom加载完后才去执行,那我们就可以使用这个来实现。当然, 它也有些类似于 mounted()这一个勾子函数。mounted函数是跟 data()同一级的。
//如果,我们在使用 ref="myRef",获取不了的时候,在js中我们可以这样子去使用
this.$nextTick(()=>{
let myRef = this.$refs['myRef']
})