实验axios用户登录及token验证

1. 登录接口获得token,通过localStorage.setItem('token',res.data.data.token)将token保存下来
2. 通过localStorage.ge'tItem('token')获取token,axios添加请求拦截为请求头添加token
<!DOCTYPE html>
<html>

<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Page Title</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <div id="app">
        <button @click="login">登录</button>
        <button @click="islogin">验证</button>
    </div>
</head>

<body>
    <script>
        var instance = axios.create({
            baseURL: 'http://stuq.ceshiren.com:8089'
        });
        let token = '';

        instance.defaults.withCredentials = false;
        instance.defaults.headers.common['token'] = token;
        instance.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8';//配置请求头
        // 添加请求拦截器
        instance.interceptors.request.use(config => {
           
            //localStorage.getItem("token") 获取token的value
            if (localStorage.getItem('token')) {
                //将token放到请求头发送给服务器,将tokenkey放在请求头中
                token=localStorage.getItem('token')
                console.log(token)
                config.headers.common['token']=token;
            }
            return config;
        },
            error => {
                return Promise.reject(error);
            })
        

        var app = new Vue({
            el: "#app",
            methods: {
                login: function () {
                    //发起请求-登录
                    let datainfo={"userName":'demouser','password':'demouser'}
                    instance.post(
                        '/user/login',
                        datainfo
                    ).then(res => {
                        // resolve(res)
                        if(res.data.resultCode==1){
                            localStorage.setItem('token',res.data.data.token)
                        }
                    })
                },
                islogin: function () {

                    //验证登录是否成功
                    instance.get(
                        '/user/isLogin'
                    ).then(res => {
                        // resolve(res)
                        return res.data
                    })
                }

            }
        })

    </script>
</body>

</html>
响应结果：