vue----操作JWT

vue登录获取token

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
loginAuth() {
                let params = {
 
                    login_name: this.ruleForm.username,
 
                    login_password: md5(this.ruleForm.password)
 
                }
                let that = this
                  //axios 请求后台接口
                api.login(params).then(res => {
                    if (res.code == 0) {
                        that.MSG.success(res.msg)
                        that.loginSuccess(res)
                    } else {//result.state==1||reuslt.state==2
                        that.MSG.warning(res.msg)
                    }
 
                })
 
            },
            //登陆成功
            loginSuccess(result) {<br>          //也可以用cookie存储
                sessionStorage.setItem('token', result.token)
                this.$router.push({ path: '/index' })
            }
 
登陆验证

 

在main.js文件,在请求拦截方法中,为请求接口加入token

需要注意的是token格式为:‘Bearer ’+token,token参数需要赋值给请求头的Authorization

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
axios.interceptors.request.use(
 
    config => {
 
        //除登陆接口意外的接口都要加上token,才可以请求接口
 
        if (!config.url.endsWith('/api/login')) {
 
            if(sessionStorage.getItem('token')!=null){
 
                const token='Bearer '+sessionStorage.getItem('token')
 
                config.headers.common['Authorization']=token
 
            }       
 
        }
 
        return config;
 
    },
 
    error => {
 
        return Promise.reject(error);
 
    }
 
);
 
axios请求头加token

  

posted @   小名的同学  阅读(418)  评论(0编辑  收藏  举报
点击右上角即可分享
微信分享提示