登录模块的使用与创建

一、如何实现登录注册

1.在Vue里创建文件Login.vue和user.vue

2.在router里配置路由

    {path: '/user',name: 'User',component: () => import('../views/user/User.vue'),meta: {keep: true}},{path: '/login',name: 'Login',meta: {nofoot: true},component: () => import('../views/user/Login.vue')},

3.在user页面点击跳转到Login页面

<template><div><router-link to="/login">登录</router-link></div>
</template>

4.新建api文件，获取登录接口

import request from '../../utils/request.js'
import qs from 'qs'//请求登录的文档接口
function Login(data){// 返回一个promisereturn new Promise((resolve,reject)=>{request.post("/member/index_login.php",qs.stringify(data)).then(res=>{resolve(res)}).catch(err=>{reject(err)})})}
//导出接口
export {Login};

5.在Login页面实现单击登录

<template><div>//进行数据的双向绑定用户名：<input type="text" v-model="user.userid" /><br>密  码：<input type="password" v-model="user.pwd" /><br>//单击时，调用login()事件<button @click="login()">登录</button></div>
</template><script>
//引入api文件import {Login} from '@api/user/user.js'export default {data() {return {user: {//接口文档数据fmdo: "login",dopost: "login",userid: '',pwd: '',}}},methods: {//调用登录接口，实现成功登录login() {Login(this.user).then(res => {//登录成功是弹出提示框alert(res.data.msg);      //判断是否登录成功，status == 1是接口文档里定义的，等于1是登录成功if (res.data.status == 1) {//登录成功跳转到user页面this.$router.replace("/user")}})}}}
</script>

二、登录成功后获取用户信息

1.在api文档里添加获取用户信息接口

function GetUserInfo(){// 登陆成功时获取用户信息的文档接口return new Promise((resolve,reject)=>{request.get("/member/ajax_login.php").then(res=>{resolve(res)}).catch(err=>{reject(err)})})}
//导出接口
export {Login,GetUserInfo};

2.在user页面获取用户信息

<template><div>//登录成功时显示用户信息<p v-if="userInfo.M_LoginID"><span>{{userInfo.M_LoginID}}:</span><span>{{userInfo.M_Scores}}:</span><span>退出</span></p>//否则显示登陆<p v-else><router-link to="/login">登录</router-link></p></div>
</template>
<script>
//引入api文件的GetUserInfo方法import {GetUserInfo} from "../../api/user/user.js"export default{data(){return{//用户信息userInfo:{}}},created() {//调用获取用户信息的方法GetUserInfo().then(res => {if (res.data) {// 重新赋值个userInfothis.userInfo = res.data;}})},
}

三、登陆后退出

1.在user里，当单击退出键时调用logout()事件
2.在user里导入登陆接口文档Login
3.在user页面的methods里通过传参的不同实现退出登陆

<template><div>//单击退出键时调用logout()事件<span @click="logout()">退出</span></p></div>
</template>Login
<script>
//引入api文件的GetUserInfo，Login方法import {GetUserInfo，Login} from "../../api/user/user.js"methods:{//退出方法logout(){//登陆和退出的接口一样，传入的参数不一样Login({dopost:"exit"}).then(res=>{alert(res.data.msg);//如果状态为1代表退出成功if(res.data.status==1){this.userInfo={};}})}}

四、token的使用

1.介绍
1、Token的引入：Token是在客户端频繁向服务端请求数据，服务端频繁的去数据库查询用户名和密码并进行对比，判断用户名和密码正确与否，并作出相应提示，在这样的背景下，Token便应运而生。

2、Token的定义：Token是服务端生成的一串字符串，以作客户端进行请求的一个令牌，当第一次登录后，服务器生成一个Token便将此Token返回给客户端，以后客户端只需带上这个Token前来请求数据即可，无需再次带上用户名和密码。

3、使用Token的目的：Token的目的是为了减轻服务器的压力，减少频繁的查询数据库，使服务器更加健壮。
2.使用
登陆时保存token

methods: {login() {Login(this.user).then(res => {alert(res.data.msg);// 判断是否登陆成功if (res.data.status == 1) {//获取查询参数var redirect=this.$route.query.redirect||"/user";// 当登录成功时候把用户的token存起来window.localStorage.setItem("token",res.data.token);this.$router.replace(redirect);}})}}

在页面获取用户信息

然后在utils的request里添加token请求头

退出时，要清除token

<template><div>//单击退出键时调用logout()事件<span @click="logout()">退出</span></p></div>
</template>Login
<script>
//引入api文件的GetUserInfo，Login方法import {GetUserInfo，Login} from "../../api/user/user.js"methods:{//退出方法logout(){//登陆和退出的接口一样，传入的参数不一样Login({dopost:"exit"}).then(res=>{alert(res.data.msg);//如果状态为1代表退出成功if(res.data.status==1){this.userInfo={};//注销tokenwindow.localStorage.removeItem("token");}})}}

                                                                     小白编写，仅供参考

登录模块与token的使用和创建相关推荐

Springboot之登录模块探索（含Token，验证码，网络安全等知识）
简介登录模块很简单,前端发送账号密码的表单,后端接收验证后即可~ 淦!可是我想多了,于是有了以下几个问题(里面还包含网络安全问题): 1.登录时的验证码 2.自动登录的实现 3.怎么维护前后端登录状 ...
【Android项目实战 | 从零开始写app(十三)】实现用户中心模块清除token退出登录信息修改等功能
五一后,被ji金伤了,哇呜呜,还是得苦逼老老实实打工写代码,看下面吧本篇实现效果: 实现登录用户名展示到用户中心页面上,并且页面有个人信息,订单列表,修改密码,意见反馈发送到服务端,前面登录后,通过 ...
jboss eap 7.0_创建委托登录模块（用于JBoss EAP 6.1）
jboss eap 7.0 [如果只想查看代码,请向下滚动] 动机在RHQ中,我们需要一个安全域,该域可用于通过容器管理的安全性来保护REST-api及其Web应用程序. 过去,我只是使用经典的Da ...
创建委托登录模块（用于JBoss EAP 6.1）
[如果只想查看代码,请向下滚动] 动机在RHQ中,我们需要一个安全域,该域可用于通过容器管理的安全性来保护REST-api及其Web应用程序. 过去,我只是使用经典的DatabaseServerLo ...
小程序登录本地服务器,微信小程序实现用户登录模块服务器搭建
我选用的是node.js来搭建服务器,没有安装的小伙伴可以参考我的node.js其他博客. 服务器安装与配置初始化项目,将会自动创建package.json配置文件. npm init -y 安装E ...
HR-Saas（二）：登录模块
线上地址本章节,我们将在现有模板的基础上,完成如图的登录模块的功能 1. 设置固定的本地访问端口和网站名称目标: 设置统一的本地访问端口和网站title 在正式开发业务之前,先将项目的本地端口和网 ...
使用 Abp.Zero 搭建第三方登录模块（四）：微信小程序开发
简短回顾一下微信小程序端的流程: 用户通过扫码进入小程序的鉴权页面,更新状态到ACCESSED已扫码用户点击确认授权,微信通过wx.login()接口获取第三方登录的必要信息:Code登录凭证. 微 ...
使用shiro的会话管理和redis缓存管理来构建登录模块spring+struts+hibernate(SSH)
shiro是一个很好用的安全框架,主要表现在用户认证,权限认证,会话管理,如果想优化还可以做Cache管理,我们不需要做太多工作在用户身份token安全方面(记录shiro及用redis开发的步骤及一 ...
002云E办项目之登录模块
如果你没有看第一篇文章,建议你去看一下文章链接好好看每一步你可以知道什么是逆向工程你可以在这里好好学习一下登录模块由于本的sql语句放在001云E办项目创建一. 逆向工程(创建AutoGe ...

登录模块与token的使用和创建