vue axios 发送get请求传递参数给后端失败_一次简单的Vue项目

5 登录验证及权限设置既然要做一个系统，肯定就少不了登录验证，我们先实现一个简单的登录页面。首先在components文件夹下新建一个Login.vue文件。页面相关首先是html和css部分，script稍后再做介绍。<template><div class="base-background"><div class="outer">...

weixin_39917811

504人浏览 · 2020-12-01 10:38:51

weixin_39917811 · 2020-12-01 10:38:51 发布

5 登录验证及权限设置

既然要做一个系统，肯定就少不了登录验证，我们先实现一个简单的登录页面。首先在components文件夹下新建一个Login.vue文件。

页面相关

首先是html和css部分，script稍后再做介绍。

<template>
  <div class="base-background">
    <div class="outer">
      <div class="login-box">
        <el-form :label-position="labelPosition" label-width="auto">
          <el-form-item label>
            <el-input v-model="username" clearable>
              <template slot="prepend">账号</template>
            </el-input>
          </el-form-item>
          <el-form-item label>
            <center>
              <el-input v-model="password" show-password clearable>
                <template slot="prepend">密码</template>
              </el-input>
            </center>
          </el-form-item>
          <center>
            <el-button class="primary" round @click="login">登录</el-button>
          </center>
        </el-form>
      </div>
    </div>
  </div>
</template>
<style scoped>
.base-background {
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: rgb(165, 219, 245);
}
.outer {
  border: 1px;
  width: 400px;
  height: 300px;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: transparent;
}
.login-box {
  text-align: center;
  vertical-align: middle;
  margin-top: 80px;
  height: 100%;
  width: 100%;
}
</style>

由于自己还没有系统的学习css，所以比较丑= =。然后在路由中添加相关信息（和根路由'/'同级）：

{
      path: '/Login',
      name:'login',
      component:() =>import('@/components/Login.vue')
    }

直接访问 http://localhost:8080/Login ，效果如下：

现在要做的就是将用户名和密码传输到后端，通过服务器进行验证，这个过程中会使用到axios。

axios

axios是一个易用、简洁且高效的http库，简单理解为一款发送http请求的工具即可。

首先进行安装：

npm install axios

然后在main.ts中引入：

import axios from 'axios'

然后再添加相应的配置：

axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'
// 为get和post方法分别添加头信息
axios.defaults.headers.get['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'
axios.defaults.withCredentials = true
// 需要访问的api的ip地址
axios.defaults.baseURL = 'http://192.168.32.42:8000'

// 设置请求时的拦截器，即在请求前在Authorization字段中写入token
axios.interceptors.request.use(
  config => {
    if (sessionStorage.token) {
      config.headers.Authorization = `${sessionStorage.token}`;
    }
    return config;
  },
  err => {
    return Promise.reject(err);
  }
)


// 设置响应时的拦截器，如果http状态码是401或者404则说明请求异常，清空token并返回到登录页面
axios.interceptors.response.use(
  response => {
    return response;
  },
  error => {
    if (error.response) {
      switch (error.response.status) {
        case 401:
          sessionStorage.token = "";
          router.replace({
            path: '/Login',
            query: { redirect: router.currentRoute.fullPath }
          });
          break;
        case 404:
          sessionStorage.token = "";
          router.replace({
            path: '/Login',
            query: { redirect: router.currentRoute.fullPath }
          });
          break;
      }
    }
    return Promise.reject(error.response)
  }
);

然后将axios注册为全局变量（该语句一定要用在实例化Vue后边）：

Vue.prototype.$http = axios

我们再考虑一下Login.vue组件中的登录逻辑，主要逻辑如下所示，对应的注释也给了出来：

<script>
import qs from 'qs';
export default {
  data() {
  // 一些数据的初始化
    return {
      labelPosition: "center",
      username: "",
      password: ""
    };
  },
  methods: {
    login() {
      let url = "/api/login";
      // 访问对应的后端的api获取登录信息
      this.$http.post(
        url,
        qs.stringify({ user: this.username, password: this.password })
      ).then(response => {
          console.log(response.data.token);
          // 将获取的数据给予相应的字段，主要是用户名，权限和认证token
          sessionStorage.token = response.data.token;
          sessionStorage.level = response.data.level;
          sessionStorage.user = response.data.username;
          console.log(sessionStorage.user)
          // 登录成功则跳转到根路由处
          this.$router.push('/')
      }).catch((err) => {
          console.log('登录失败！！！')
          this.$message.error('登录失败！！！');
      });
    }
  }
}
</script>

这里看到还需要一个qs模块，我们安装即可：

npm install qs

然后我们开启后端服务器（后端用的是python的flask框架，有机会会详细介绍），输入账号密码，这个账号密码当然是你自己注册并存放在数据库中的。进行登录测试：

至此我们就成功的完成了一个登陆模块。

权限设置

开发过程中肯定也要考虑安全问题，比如有的页面需要对应的用户权限才能访问，没有登录则无法访问。

在vue中可以通过在路由元信息中添加认证设置，从而实现权限控制。

比如我们在/2的路由下的元信息中添加认证字段：

{
  path: '2',
  name: '2',
  // 懒加载
  component: () => import('@/components/Content.vue'),
  meta: {
    title: '2',
    requireAuth: true
  }
}

当然，要使权限设置生效，我们还需要添加一个路由守卫，在每次路由跳转前验证该页面是否需要验证，将如下的代码添加至router.ts中：

router.beforeEach((to, from, next) => {
  let token = sessionStorage.token;//从sessionstorage中获取，或者利用localstorage和vuex
  let level = sessionStorage.level;
  if (to.meta.requireAuth) { //如果该路由需要登录
    if (token) {  //且token是存在的，则可以进入该路由
      next()
    } else {
      next({
        path: '/Login', //否则跳转到登录页面，
        query: { redirect: to.fullPath }//将跳转的路由path作为参数，登录成功后跳转到该路由
      })
    }
  } else {
    next()
  }
});

然后我们来进行测试，看看效果如何：

不登录直接访问根路由是可以的，因为我们没有添加认证设置。我们再来看看访问/2的效果：

看到跳转到了登录页面，因为我们访问的时候没有token，所以无法访问。因此在进行权限设置时只需要为相应的页面添加认证设置即可。

多页面共享SessionStorage

在实际使用过程中有这么一个使用场景，用户访问一个网站时要打开多个标签页。这个时候问题就来了，我们肯定不能让用户多次登录啊，可通过设置共享SessionStorage来实现。具体SessionStorage，localStorage，Cookie的区别可参考：https://jerryzou.com/posts/cookie-and-web-storage/

下面直接上实现方法，在router.ts中添加如下代码：

(function () {

  if (!sessionStorage.length) {
    // 这个调用能触发目标事件，从而达到共享数据的目的
    localStorage.setItem('getSessionStorage', Date.now().toString());
  }

  // 该事件是核心
  window.addEventListener('storage', function (event) {
    if (event.key == 'getSessionStorage') {
      // 已存在的标签页会收到这个事件
      localStorage.setItem('sessionStorage', JSON.stringify(sessionStorage));
      localStorage.removeItem('sessionStorage');

    } else if (event.key == 'sessionStorage' && !sessionStorage.length) {
      // 新开启的标签页会收到这个事件
      if (event.newValue) {
        var data = JSON.parse(event.newValue),
          value;
        for (var key in data) {
          sessionStorage.setItem(key, data[key]);
        }
      }
    }
  });
})();

同样地，我们来看看实际效果。首先先进行登录操作，为了保证我们处于登录状态，我们访问/2路由：