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

最新推荐文章于 2024-05-12 19:33:54 发布

韩宏伟

最新推荐文章于 2024-05-12 19:33:54 发布

阅读量1.6k

点赞数 1

分类专栏： axios 文章标签： vue

本文链接：https://blog.csdn.net/HHW223/article/details/119728343

版权

axios 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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）【并输入项目名称】------> 创建

这时就创建完成了

node_modules 这个文件夹是用来存放项目依赖的【由于文件众多这个文件夹不允许上传至git】
public 用来放一些静态资源
src 类似于Java中的源文件夹
1. assets 用来存放图片啥的
2. components 这个文件夹用来存放项目中的一些组件【因为vue是一个单页面应用，好多页面功能由组件来实现】
3. App.vue 这个是整个vue项目的核心
4. main.js 整个vue项目的配置核心，整个项目的大多数配置都在这里进行配置
Babel.config.js 是一个转码编辑器，主要作用是用来将es6语法转换成es5
Package-lock.json 用于记录模块与模块之间的依赖关系，锁定包版本，记录项目所依赖的第三方包的树状结构和包的下载地址，加快重新下载的速度. Cnpm install axios --save
package.json 用来记录当前项目中所有安装过依赖 cnpm install axios
Posts.config.js 一个用来的处理css一个配置文件比如 px转rem

module.exports = () => ({
  plugins: [
    require('autoprefixer')(),
    // require('postcss-px2rem')({ remUnit: 75 })
    require('postcss-pxtorem')({
      rootValue: 37.5,
      propList: ['*']
    })
  ]
});

Readme.md 相对比较重要的一个文件，这个文件中记录了当前项目如何启动，并如何安装配置，【当你接手别的vue项目时，先打开此文件，看看相关命令就可顺利启动项目了】

接下来通过一个简单的案例来快速🔜上手vue项目

首先我们先启动一下项目，看看vue项目长什么样子，通过命令行进入当前项目所在的目录，并输入你刚才在readme.md文件看到的启动命令
此时你就可以看到vue项目启动了，并打开浏览器输入相关网址，此时你就可以看大vue初始项目样子了
这时请打开app.vue 文件，你可以看到vue文件和html文件还是有一定差别的，最明显的差别是真个文件的根目录是template , 在里面有一个div 其次是一个图片标签和一个我们从来没见过的一个标签它是大小写混在一起的，这和我们的认知并不一样，这个标签是什么呢？！他就是我们刚刚说的组件，他是从另外一个页面引入过来的，你可以在script标签的第一个行看到他的引入过程, 这是你发现在标签中你会发现有个叫msg的属性，里面有一个字符串，这个字符串有点眼熟吧，没错它和页面上的内容是一模一样的，咦～我有了一个大胆的想法，将字符串的内容进行修改，然后进行保存【注意‼️不用重新启动项目，只要保存就可以了，vue项目可以自行编译并重新启动有点像Java中的热部署】此时你会发现页面的内容改变了，刚刚所做的就是父子组件进行了数据的传递，在父组件中传入数据给子组件，并在子组件中进行展示

ok 到目前为止基本了解了vue项目的一些基本配置了，我们继续，接下来我们要安装第一个插件

首先打开正在允许的命令框按 ctrl + c 停止项目的运行
然后输入 cnpm install vue-router --save 来安装路由，【路由的作用是用来控制项目中页面的跳转】

在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 = function push(location) {
  return originalPush.call(this, location).catch(err => err)
}
// 创建路由条状方式
const router = new Router({
	routes: [{
    // 当在路径中输入 / 时跳入登陆页面
			path: '/',
			redirect: '/login'
		},
		{
			path: '/login',
			name: 'login',
			component: login
		},
		{
			path: '/home',
			name: 'home',
			component: home
		}
	]
});
export default router;

接下来，打开app.vue 我们将div中的内容全部清空，并输入此标签
```
<router-view></router-view>
```
打开main.js 在文件的头部引入router.js
```
import router from './router'
```
并在new vue 对象中输入 router
保存文件启动项目在浏览器中的地址栏中输入/login 或者 /home 你会发现页面进行了变幻，这标志着前端有了独立控制页面展示的权利

我们继续，打开login.vue 我们来开始搞登陆

首先在template 标签里搞一个登陆的输入框

<div id="">
		<form action="" method="">
			请输入手机号 <el-input v-model="loginForm.phone" placeholder="请输入内容"></el-input>
			请输入密码 <el-input v-model="loginForm.password" type="password" placeholder="请输入内容"></el-input>
			<el-button @click='login()'>登陆</el-button>
		</form>
	</div>

终止项目的允许安装axios组件 cnpm install axios --save 【axios是用来发送请求的，它的主要作用类似于ajax】

安装完成后在main.js 添加如下代码

import axios from 'axios'
//Vue.use(axios); // 删除该行配置
Vue.prototype.http = axios; // 此配置是为防止axios报错而配置的

在script中输入如下代码

const axios = require('axios'); // 引入axios组件
	export default {
		data() { // vue项目中用的是双向数据绑定，这个配置会直接将输入框中的数据获取过来，同样也可以设置
			return {
				loginForm: { // 这里设置了一个对象
					phone: "",
					password: ""
				}
			}
		},
		methods: {// methods 是vue当中的一个属性，和它的名字一样它是用来存放方法的
			login() { // 登陆方法
				let _this = this; // 创建一个变量
				console.log("登陆测试");
        // 因为有了双向的数据绑定，我们就可以不用大费周折的来获取输入框中到内容了
				if (this.$data.loginForm.username === "" || this.$data.loginForm.password === "") {
					alert("手机号或密码不能为空");
					return;
				}
				console.log("准备发送ajax请求");
        // 本片代码的重点来了 ， axios 和 ajax 的用法基本一样都是用来发送请求的
				axios({
					method:"post", // 请求格式
					url:"/api/user/loginpro", // 请求路径 
					data:_this.$data.loginForm // 请求时携带的参数
				}).then(res => { // then 类似于 succes 回调函数，都是指的是请求成功后怎么办
					console.log("成功了");
					console.log(res);// res 是后端返回的参数
					if(res.data.success === "true"){
						console.log("请求成功了") // 判断手段是否成功
						// 将用户令牌存入cookie 并跳转只 首页
						this.$cookieStore.setCookie("token" , res.data.data.token  , 60 * 60 * 2)
						_this.$router.push('/home');
						return;
					}else{
            // 这里表示的是用户登陆失败，比如 用户名密码输入错误
						alert(res.data.msg)
					}
				}).catch(error => {
          // 这里多半都是用户因为网络问题无法访问后端接口而调用的代码
					console.log(error)
					console.log("发送失败")
				})
			}
		}
	}

当你完成上面的操作后，准备试试时，你会发现控制台报错，经过百度你会发现发生了跨域。怎么解决呢？请前往 https://blog.csdn.net/HHW223/article/details/119573746 根据里面的教程来详细配置

经过上面的配置，你发现你实现了登陆，但是，路由好像不受控制了唉，比如在没有登陆的情况下，用户可以通过地址栏来随意的进入首页，这是违背了我们的设计初衷的。这时我们就需要路由守卫来帮我们进行控制，用户只有手持令牌才能进入他可以进入的页面，打开前面的router/index.js 在里面添加路由守卫

// 导航守卫
// 使用 router.beforeEach 注册一个全局前置守卫，判断用户是否登陆
router.beforeEach((to, from, next) => { // 三个参数分别是要去哪里， 从哪里来，接下来应该怎么做
	if(to.path === "/login"){
		next();
	}else{
    // 用户只要访问除了登陆页面的其他页面，程序都要检查用户的令牌获取情况，如果没有令牌，直接前往登陆页面，如果有令牌就放行
		console.log("路由守卫执行");
		let token = getCookie("token");
		console.log(token);
		if(token === "" || token === null){
			next("/login")
		}else{
			next()
		}
	}
});

此时我们就完成了一个登陆流程的基本操作✅

配置一个操作cookie的工具js

// 设置cookie 带过期时间
export function setCookie(c_name,value,expire) {
    var date=new Date()
    date.setSeconds(date.getSeconds()+expire)
    document.cookie=c_name+ "="+escape(value)+"; expires="+date.toGMTString()
    //console.log(document.cookie)
}
 
 // 通过名字获取对应的值
export function getCookie(c_name){
    if (document.cookie.length>0){
        let c_start=document.cookie.indexOf(c_name + "=")
        if (c_start!=-1){ 
            c_start=c_start + c_name.length+1 
            let c_end=document.cookie.indexOf(";",c_start)
            if (c_end==-1) c_end=document.cookie.length
                return unescape(document.cookie.substring(c_start,c_end))
            } 
        }
    return ""
}
 // 删除cookie
export function delCookie(c_name){
    setCookie(c_name, "", -1)
}

为了能在vue全局项目中可用，将此js文件添加的main.js ，将cookie.js 放入到vue原型链中

import {setCookie , getCookie , delCookie} from "@/assets/cookie.js"
Vue.prototype.$cookieStore = {
	setCookie,
	getCookie,
	delCookie
}

韩宏伟

关注

1
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
vue 实现登陆【前后端分离， tokan】

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 来判断是否正常安装安装Hbuilder
复制链接

扫一扫