vue无感刷新

一、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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81

二、vue打包nginx配置上线
1、打包我就不说了吧想必大家都知道

npm run build
1

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;
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

三、请求封装

//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'
    })
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

四、数据已更新，但页面常渲染的数据并没有更新的解决方法

this.shopCar.count[category - 1]++  //在js代码中对需要修改的数据进行编写后，只需要在下一行编写如下代码
this.$forceUpdate() //这段代码的意思是“强制刷新”的意思
1
2

五、局部样式的修改（针对某个页面，不影响其他页面）
其实， 有很多时候，我们需要对某个页面的样式进行修改，但并不影响基其他页面的样式。在这个时候，我们可以在style标签里面添加如下

<style lang="less" scoped>
	/deep/ .el-button{
		//css样式
	}
style>
1
2
3
4
5

当然，如果在这种无法生效的时候，我们还可以把css写在js里面，代码如下

beforeCreate(){ //注意，这个需要跟 data 、created() 同一级
	//下面的代码应该可以看得懂
	document.querySelector('body').setAttribute('style', 'zoom:0.4;')
}
1
2
3
4

六、this.$nextTick()的理解
简单的来理解，nextTick函数是在dom加截完后才执行。或者，我们这样子去想，假设我们有个需求，是需要在dom加载完后才去执行，那我们就可以使用这个来实现。当然， 它也有些类似于 mounted()这一个勾子函数。mounted函数是跟 data()同一级的。

//如果，我们在使用 ref="myRef"，获取不了的时候，在js中我们可以这样子去使用
this.$nextTick(()=>{
	let myRef = this.$refs['myRef']
})
1
2
3
4