vue入门之路由守卫实现权限验证(5-1)

960 阅读2分钟

一、前期准备

1.创建脚本auth.js

作用:用来管理登录用户的token。

**token简述:**前后分离的开发模式下,客户端进行请求后台服务的一个令牌。为一串密文形式的字符串,一般在用户请求登录后,后台返回给前台。

脚本文件目录如下图所示

**代码:
**

import Cookies from 'js-cookie'const TokenKey = 'Admin-Token'export function getToken() {  return Cookies.get(TokenKey)}export function setToken(token) {  return Cookies.set(TokenKey, token)}export function removeToken() {  return Cookies.remove(TokenKey)}

**注:
**

**js-cookie:**是一个处理cookies的js API,上述是代码仅是封装了部分我们这次项目能用到到方法,深入研究可以自行百度

安装: npm install js-cookie --save

2.创建脚本settings.js

**作用:**储存web项目中的各类配置变量,本次教程我们只用到了一个web页的title,所以我们只配置这一项。

脚本文件目录如下图所示

代码:

module.exports = {  title: '后台管理'}

3.创建脚本get-page-title.js

作用:对settings.js中的title,进行赋值、调用等操作

脚本文件目录如下图所示

代码:

import defaultSettings from '@/settings'const title = defaultSettings.title || 'admintitile'export default function getPageTitle(pageTitle) {  if (pageTitle) {    return pageTitle+"-"+title  }  return title}

二、模块化

很多同学会私下问我,像上述的三个文件的代码,明明可以放到一起,为什么要分成独立的脚本进行编写。

其实这是一种编程思想趋使下的一种开发习惯,这种思想就是下面给大家描述的模块化思想

官方定义
从项目结构看:使开发人员有更清晰的思维,提高项目的维护性。
从代码结构看:可提高对代码结构的依赖管理、可读性、重用性等。
深入了解官方的高大上,自行百度即可(哈哈~~~)

个人理解(不喜勿喷,欢迎指正)

将不同的业务功能进行分类,各自成为独立的模块。这个不仅是适用于编程中的项目结构梳理、代码编写、框架研发等。在生活中模块化思想例子也是比比皆是。

学生会将试题的难易进行分类,然后进行答题

企业会将部门进行分类,然后进行管理

老婆会将你的罪过进行分类,然后在你不听话时,进行高效率的call back(说多了哈)

最后引用一句名言
文明的建立的不是机器而是思想。——托尔斯泰
有好的思想才能创造高效率的思维模式,进而提高我们的工作效率

因为文章占用的篇幅过多,主菜会在下一篇文章中继续进行介绍。兄弟们,磨刀不误砍柴功,小伙们要有耐心哦~~~

请继续阅读:vue入门之路由守卫实现权限验证(5-2)