vue 实现登陆【前后端分离， tokan】_多端 vue登录-优快云博客

本文链接：https://blog.youkuaiyun.com/HHW223/article/details/119728343

本文详细介绍了如何使用Vue搭建前后端分离项目，涉及安装Node.js、淘宝镜像、HBuilderX，配置Vue Router，实现登录功能、数据传递、路由守卫及跨域处理，同时介绍了cookie工具的使用和权限控制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue 实现登陆【前后端分离， token】

检查是否安装node.js 通过在命令框中输入 npm -v来判断node是否安装，如果没安装访问此网站 https://nodejs.org/zh-cn/
安装淘宝镜像在命令框中输入此命令（cnpm是国内的镜像提供商，可以大大提高npm依赖下载的成功率）

npm install -g cnpm --registry=https://registry.npm.taobao.org

通过 cnpm -v 来判断是否正常安装
安装HbuilderX，开发版
点击文件------> 新建项目 ------> 选择 vue项目（2.6.10）【并输入项目名称】------> 创建
这时就创建完成了
1. node_modules 这个文件夹是用来存放项目依赖的【由于文件众多这个文件夹不允许上传至git】
2. public 用来放一些静态资源
3. src 类似于Java中的源文件夹
  1. assets 用来存放图片啥的
  2. components 这个文件夹用来存放项目中的一些组件【因为vue是一个单页面应用，好多页面功能由组件来实现】
  3. App.vue 这个是整个vue项目的核心
  4. main.js 整个vue项目的配置核心，整个项目的大多数配置都在这里进行配置
4. Babel.config.js 是一个转码编辑器，主要作用是用来将es6语法转换成es5
5. Package-lock.json 用于记录模块与模块之间的依赖关系，锁定包版本，记录项目所依赖的第三方包的树状结构和包的下载地址，加快重新下载的速度. Cnpm install axios --save
6. package.json 用来记录当前项目中所有安装过依赖 cnpm install axios
7. Posts.config.js 一个用来的处理css一个配置文件比如 px转rem
```
module.exports = () => ({
     
  plugins: [
    require('autoprefixer')(),
    // require('postcss-px2rem')({ remUnit: 75 })
    require('postcss-pxtorem')({
     
      rootValue: 37.5,
      propList: ['*']
    })
  ]
});
```
1. Readme.md 相对比较重要的一个文件，这个文件中记录了当前项目如何启动，并如何安装配置，【当你接手别的vue项目时，先打开此文件，看看相关命令就可顺利启动项目了】
2. 接下来通过一个简单的案例来快速🔜上手vue项目
  1. 首先我们先启动一下项目，看看vue项目长什么样子，通过命令行进入当前项目所在的目录，并输入你刚才在readme.md文件看到的启动命令
  2. 此时你就可以看到vue项目启动了，并打开浏览器输入相关网址，此时你就可以看大vue初始项目样子了
  3. 这时请打开app.vue 文件，你可以看到vue文件和html文件还是有一定差别的，最明显的差别是真个文件的根目录是template , 在里面有一个div 其次是一个图片标签和一个我们从来没见过的一个标签它是大小写混在一起的，这和我们的认知并不一样，这个标签是什么呢？！他就是我们刚刚说的组件，他是从另外一个页面引入过来的，你可以在script标签的第一个行看到他的引入过程, 这是你发现在标签中你会发现有个叫msg的属性，里面有一个字符串，这个字符串有点眼熟吧，没错它和页面上的内容是一模一样的，咦～我有了一个大胆的想法，将字符串的内容进行修改，然后进行保存【注意‼️不用重新启动项目，只要保存就可以了，vue项目可以自行编译并重新启动有点像Java中的热部署】此时你会发现页面的内容改变了，刚刚所做的就是父子组件进行了数据的传递，在父组件中传入数据给子组件，并在子组件中进行展示
  4. ok 到目前为止基本了解了vue项目的一些基本配置了，我们继续，接下来我们要安装第一个插件
    1. 首先打开正在允许的命令框按 ctrl + c 停止项目的运行
    2. 然后输入 cnpm install vue-router --save 来安装路由，【路由的作用是用来控制项目中页面的跳转】
    3. 在src文件夹下创建 router文件夹并在其下创建index.js
```
import Vue from 'vue'; // 引入vue内容
import Router from 'vue-router'; // 使用vue 路由
import login from '@/components/login'; // 需要在插件文件夹下创建 login.vue 并在文件中写入相关标识 ‼️
import home from '@/components/home'; // 同上
// 使用路由
Vue.use(Router);

//获取原型对象上的push函数
const originalPush = Router.prototype.push
//修改原型对象中的push方法
Router.prototype.push = 
```