Vue Authentication And Route Handling Using Vue-router（详解）
英文原文 （本文原出处），本博在原文的基础上，进一步分析代码的结构和解释代码。
创建一个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用于自定义额外的行为。见
最新文章
- 移植一个cocos2d-x游戏
- 一个漂亮的php验证码类(分享)
- 面向服务体系架构（SOA）和数据仓库（DW）的思考基于 IBM 产品体系搭建基于 SOA 和 DW 的企业基础架构平台
- jQuery的选择器小总结
- MIFARE系列1《MIFARE简介》
- windows phone MVVM开发心得第一天
- 也可以使用如下命令更改您的默认 Shell
- enum 使用
- Ibatis,Spring整合（注解方式注入）
- 思考 Swift 中的 MirrorType 协议
- wxPython跨线程调用
- 字符串匹配之horspool算法(简化的BM算法)
- 正三角形的外接圆面积,nyoj-274
- Windows Server 服务器安全配置
- 2017-2018-1 我爱学Java 第三周 作业
- js中获取URL参数的共通方法getRequest()方法
- Assembly Experiment9
- python多线程在渗透测试中的应用
- Java案例-用户注册邮箱绑定激活功能实现
- Makefile ------ .PHONY的作用