一次简单的Vue项目

5 登录验证及权限设置

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

页面相关

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

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

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

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

image

现在要做的就是将用户名和密码传输到后端，通过服务器进行验证，这个过程中会使用到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组件中的登录逻辑，主要逻辑如下所示，对应的注释也给了出来：

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

npm install qs

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

image

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

权限设置

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

在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()
  }
});

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

image

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

image

看到跳转到了登录页面，因为我们访问的时候没有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路由：

image

然后我们再打开一个新的标签页，不进行登录操作，看看是否能直接访问/2：

image

这说明SessionStorage共享成功。

登录模块就先介绍到这里，后边会带来其他的介绍。