Vue Authentication And Route Handling Using Vue-router（详解）

英文原文  （本文原出处），本博在原文的基础上，进一步分析代码的结构和解释代码。

git 代码

创建一个app:  vue-router-auth

本文详解了如何使用vue-router建立路由记录对路由记录进行检测，以及路由的处理。

1.如何使用vue-router来定义检测我们的routes,防止用户进入某个路由。

2.基于验证状态，如何跳转用户到app的不同部分。

3.用Node.js建立了一个mini server 来处理用户验证

安装Vue cli3

vue ui

插件选择vue-router。

步骤：

• Setup Node.js Server
• Updating The Vue-router File
• Define Some Components
• Setting Up Axios Globally
• Running The Application

---

建立Node.js Server

//安装数据库
npm install --save sqlite3
// hash passwords
npm install --save bcrypt
//An implementation of JSON Web Tokens.
npm install jsonwebtoken
//用于读json数据。
npm install --save body-parser

后续（具体见英文原文）

现在创建一个nodejs server用于处理user authentication.

创建一个新目录server. 它用于储存所有的使node backend的文件。

1.

创建app.js, 增加配置代码。（点击连接）

引进需要的package, 定义database, 创建一个express server和express router。

然后，定义CORS middleware, ensure we do not run into any cross origin resource errors

然后，定义路径,用于注册一个新的用户

router.post('/register', function(req, res) {...

//  传递请求body到一个databae method, 并传递一个回调函数来处理从数据库来的response data
//  定义了error checks来确保提供准确的信息给user.

当一个user成功注册，我们选择用用户的emai，创建一个验证token。（会用到之前安装的包jwt）

我们使用secret key在配置文件用来sign the auth credentials。

然后，定义路径，注册一个管理员，并登入。

router.post('/register-admin', function(req, res) {
//
}

router.post('/login', (req, res) => {
//
}

对login, 使用了bcrypt来判断user的password。

使用express server让app 可用accessible.

这里创建了一个server，端口是3000.

(以上内容需要学习node.js的相关知识)

2. 创建config.js  （见代码）

3. 创建db.js。 这里配置数据库，创建一个新数据库，并创建CRUD数据的方法。

---

更新vue-router文件

routes.js (点击查看代码)

首先确认要app的pages：

首页，注册页，登陆页，用户个人版，管理员版。

import HelloWorld from '@/components/HelloWorld'
import Login from '@/components/Login'
import Register from '@/components/Register'
import UserBoard from '@/components/UserBoard'
import Admin from '@/components/Admin'

然后，定义router构造器，使用routes构建选项，为每个组件添加路由：

let router = new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
//后续略，见git。

这里使用了meta field用于自定义额外的行为。见