登录模块的实现

登录模块的实现步骤

首先描述登录模块的设计步骤和思想：

1. 首先在前台提供输入表单，表单可以使用element UI中提供的表单元素（有前端规则验证）

2. 获取到前端输入之后，向后端发送请求，这里需要通过BasicAuth的验证，在axios参数中需要携带auth

3. 向后端发送请求通过之后，可以得到返回的token，这里的token需要持久化记录，所以可以选择利用Cookies进行记录，此后需要用到的地方也可以直接从Cookies中取出

4. 登录之后，由前端发出的其余请求都需要携带token，并且进行TokenAuth的验证。这里可以通过利用axios的拦截器来进行完成，在请求前完成对请求头的token添加

5. 之后需要完成路由鉴权，如果当前路由需要token才能访问，而Cookies中没有token，那么就跳转到登录页面

6. 登录退出的话，只需要进行Cookies的清除即可

以上是登录模块的设计思想，下面的细节说明是基于nuxt-cli工程的，其余工程也可以有类似的实现方式。

Nuxt中Cookies的应用

前端的Cookies可以简单的理解为一个携带信息的字符串，它保存在客户端，通过代码可以从中解析出对应的信息。因此，Cookies在Nuxt中就可以作为一个全局变量的提取器（个人理解）。在获得信息的时候将其存入Cookies中，当需要的时候再将它从Cookies中解析出来使用。

Nuxt要使用Cookies，需要引入插件：cookie-universal-nuxt 。

首先进行安装：

npm intall cookie-universal-nuxt --save

然后在nuxt配置文件nuxt.config.js中引入：

modules: [
    'cookie-universal-nuxt',
],

之后就可以使用了，下面是一些常见的操作：

//设置cookies
this.$cookies.set('token', token)

//获取cookies
this.$cookies.get('token')

//清除cookies
this.$cookies.remove('token')
this.$cookies.removeAll()

于是，可以在登录axios的response中完成相应的cookies存储工作，以便后续的使用。

Nuxt中axios拦截器的使用

axios拦截器可以在项目中任何一个axios请求的不同阶段发生之前进行事先定义的操作。我们需要在nuxt项目中定义axios拦截器，在axios发送请求之前给它加上token。

首先需要修改配置文件nuxt.config.js，进行模块和插件的添加：

plugins: [
    '@/plugins/axios',
],
modules: [
    '@nuxtjs/axios',
],

然后创建插件文件plugins/axios.js：

//添加插件文件 plugins/axios.js
let isClient = process.env.VUE_ENV === 'client' //区分端
export default ({redirect, $axios, app}) => {
  $axios.onRequest(config => {
    return new Promise((resolve, reject) => {
      //match api
      let token = app.$cookies.get('token');
      //add token
      if (token) config.headers.Authorization = 'Bearer ' + token;
      //其他的请求前业务逻辑 比如：api map
      resolve(config);
    })
  });

  $axios.onResponse(res => {
    return new Promise((resolve, reject) => {
      //返回数据逻辑处理 比如：error_code错误处理
      resolve(res);
    })
  });

  $axios.onError(config => {
    console.log('Making request to ' + config.url);
    alert('出现了未知的异常，请重新登录');
  })
};

Nuxt路由鉴权

Nuxt中的路由鉴权可以通过中间件来完成，中间件允许定义一个自定义函数运行在一个页面或者一组页面渲染之前。这里只说明自定义函数中应该完成的逻辑，中间件的引入和使用就不再说明。于是在这个自定义函数中，我们可以对当前路由进行判断，如果不满足要求，就跳转到登录页面。

以下为middleware/auth.js中的内容：

export default function (context) {
  let now_route = context.route.fullPath;
  //检查当前路由是否在/data下
  if (now_route.indexOf("/data") === 0) {
    //检查是否有token,如果没有token，则跳转到登录页面
    let token = context.$cookies.get('token');
    if (!token) {
      context.redirect('/login');
    }
  }
  //检查是否是admin页面
  if (now_route.indexOf("/data/admin") === 0) {
    //检查是否有权限
    let auth = context.$cookies.get('auth');
    if (auth !== 0) {
      context.redirect('/login');
    }
  }
  //检查是否是editor页面
  if (now_route.indexOf("/editor") === 0) {
    //检查是否有权限
    let auth = context.$cookies.get('auth');
    if (auth !== 0 && auth !== 1) {
      context.redirect('/login');
    }
  }
}

参考文章

1. Nuxt引用cookie-universal-nuxt在服务端请求cookie_明知山-CSDN博客_cookie-universal-nuxt
2. nuxt 服务端进行请求时带上token - 简书 (jianshu.com)