A. vue实现登陆注册功能（小白篇）
在前后端完全分离的情况下，Vue项目中实现token验证大致思路如下：
1、第一次登录的时候，前端调后端的登陆接口，发送用户名和密码
2、后端收到请求，验证用户名和密码，验证成功，就给前端返回一个token
3、前端拿到token，将token存储到localStorage和vuex中，并跳转路由页面
4、前端每次跳转路由，就判断 localStroage 中有无 token ，没有就跳转到登录页面，有则跳转到对应路由页面
5、每次调后端接口，都要在请求头中加token
6、后端判断请求头中有无token，有token，就拿到token并验证token，验证成功就返回数据，验证失败（例如：token过期）就返回401，请求头中没有token也返回401
7、如果前端拿到状态码为401，就清除token信息并跳转到登录页面
vue-cli搭建一个项目，简单说明前端要做的事：
一、调登录接口成功，在回调函数中将token存储到localStorage和vuex中
login.vue
<template>
<div>
<input type="text" v-model="loginForm.username" placeholder="用户名"/>
<input type="text" v-model="loginForm.password" placeholder="密码"/>
<button @click="login">登录</button>
</div>
</template>
<script>
import { mapMutations } from 'vuex';
export default {
data () {
return {
loginForm: {
username: '',
password: ''
}
};
},
methods: {
...mapMutations(['changeLogin']),
login () {
let _this = this;
if (this.loginForm.username === '' || this.loginForm.password === '') {
alert('账号或密码不能为空');
} else {
this.axios({
method: 'post',
url: '/user/login',
data: _this.loginForm
}).then(res => {
console.log(res.data);
_this.userToken = 'Bearer ' + res.data.data.body.token;
// 将用户token保存到vuex中
_this.changeLogin({ Authorization: _this.userToken });
_this.$router.push('/home');
alert('登陆成功');
}).catch(error => {
alert('账号或密码错误');
console.log(error);
});
}
}
}
}
</script>
store文件夹下的index.js
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store({
state: {
// 存储token
Authorization: localStorage.getItem('Authorization') ? localStorage.getItem('Authorization') : ''
},
mutations: {
// 修改token，并将token存入localStorage
changeLogin (state, user) {
state.Authorization = user.Authorization;
localStorage.setItem('Authorization', user.Authorization);
}
}
});
export default store;
二、路由导航守卫
router文件夹下的index.js
import Vue from 'vue';
import Router from 'vue-router';
import login from '@/components/login';
import home from '@/components/home';
Vue.use(Router);
const router = new Router({
routes: [
{
path: '/',
redirect: '/login'
},
{
path: '/login',
name: 'login',
component: login
},
{
path: '/home',
name: 'home',
component: home
}
]
});
// 导航守卫
// 使用 router.beforeEach 注册一个全局前置守卫，判断用户是否登陆
router.beforeEach((to, from, next) => {
if (to.path === '/login') {
next();
} else {
let token = localStorage.getItem('Authorization');
if (token === 'null' || token === '') {
next('/login');
} else {
next();
}
}
});
export default router;
三、请求头加token
// 添加请求拦截器，在请求头中加token
axios.interceptors.request.use(
config => {
if (localStorage.getItem('Authorization')) {
config.headers.Authorization = localStorage.getItem('Authorization');
}
return config;
},
error => {
return Promise.reject(error);
});
四、如果前端拿到状态码为401，就清除token信息并跳转到登录页面
localStorage.removeItem('Authorization');
this.$router.push('/login');
B. 前端登陆实现
四种方式
Cookie 出现的原因： HTTP 协议是无状态的，每次请求都会建立一个新的链接，请求结束就会断开链接，优点就是可以节省链接资源，缺点就是无法保存用户状态。Cookie 的出现就是为了解决这个问题。
Cookie 是存储在浏览器中的，可以通过 Js 和 set-cookie 这个响应字段来进行设置。
cookie 的限制：
有了 cookie 之后，服务端就可以从客户端获取到信息，如果需要对信息进行验证，那么还需要 session
服务端在收到客户端的请求之后，会在服务器中开辟一片内存空间来存放 session
第一次登陆之后，下次再访问的时候就会携带这个 cookie，服务端就可以根据 sessionId 进行验证用户是否登陆（判断这个 sessionId 和服务端保存的 sessionId 是否一致，是否有这个 sessionId 的记录或者记录是否有效）
客户端浏览器访问服务器的时候，服务器把客户端信息以某种形式记录在服务器上。这就是 Session。客户端浏览器再次访问时只需要从该 Session 中查找该客户的状态就可以了。
Token 是 服务器 生成的一个字符串，作为客户端请求的一个令牌。第一次登陆之后，服务器会生成一个 Token 返回给客户端，客户端后续访问的时候，只需带上这个 Token 进行身份认证
缺点
JWT（Json Web Token）
服务端不需要存储 Token 那么服务端是怎么验证客户端传递过来的 Token 是否有效的呢？
答案：
Token 并不是杂乱无章的字符串，而是通过多种算法拼接而成的字符串
header 部分指定了这个 Token 所使用的签名算法
payload 部分表明了这个 JWT 的意图
signature 部分为 JWT 的签名，主要是为了让 JWT 不被随意的篡改
签名的部分有两个步骤
一：
二:
最后的 Token 计算如下：
单点登陆指的是公司会搭建一个公共的认证中心，公司里的所有产品的认证都可以在这个认证中心中完成，一个产品在认证中心认证之后，再去访问其他产品时就不需要再次认证
这个时候，由于 a.com 存在已登录的 Cookie 信息，所以服务器端直接认证成功。
这个时候由于认证中心存在之前登陆过的 cookie，所以不需要再输入账号密码，直接从第四步开始执行
目前我们已经完成了单点登录，在同一套认证中心的管理下，多个产品可以共享登录态。现在我们需要考虑退出了，即：在一个产品中退出了登录，怎么让其他的产品也都退出登录？
原理也不难，其实就是在携带 ticket 去请求认证中心的时候，再去请求一下认证中心的退出登陆的 api 即可
当某个产品 c.com 退出登陆时
sso 就是一个集中地验证系统。你项目内请求时，向 sso 发一个请求，他给你个 token 你扔到游览器缓存里，请求的时候放在请求头里带着。和其他验证接口一样。 他好就好在，一个账号在不同系统里都可以登录，因为不同项目可以共用这个 token。并且通过 sso 集中管理一些用户信息，你可以方便的拿用户信息。
以微信为例子
C. 网站的用户注册与登陆是怎样实现的
用户注册：在数据库中建立表分别的用户名和密码表，当你注册的时候你所填写的信息就会进入到数据库中的对应的表单中。
登入：根据填写的ID在数据库中调取数据，对照密码是否相等，相等则登入成功。
需要学习：数据库，熟练运用SQL语句，熟悉PHP语言，熟悉web前端基本操作。
已经成为互联网的品牌、网上商标保护必备的产品之一。通俗的说，域名就相当于一个家庭的门牌号码，别人通过这个号码可以很容易的找到你。以一个常见的域名为例说明，网址是由二部分组成，标号“”是这个域名的主域名体，而最后的标号“com”则是该域名的后缀，代表的这是一个com国际域名，是顶级域名。而前面的www.是网络名， 为www的域名。
DNS规定，域名中的标号都由英文字母和数字组成。每一个标号不超过63个字符，也不区分大小写字母。标号中除连字符（-）外不能使用其他的标点符号。级别最低的域名写在最左边，而级别最高的域名写在最右边。
空间
常见网站空间：虚拟主机，虚拟空间，独立服务器，云主机，VPS。
虚拟主机是在网络服务器上划分出一定的磁盘空间供用户放置站点、应用组件等；提供必要的站点功能、数据存放和传输功能。所谓虚拟主机，也叫“网站空间”，就是把一台运行在互联网上的服务器划分成多个“虚拟”的服务器。每一个虚拟主机都具有独立的域名和完整的Internet服务器（支持WWW、FTP、E-mail等）功能。虚拟主机是网络发展的福音，极大的促进了网络技术的应用和普及。同时虚拟主机的租用服务也成了网络时代新的经济形式。虚拟主机的租用类似于房屋租用。
VPS即指虚拟专用服务器，是将一个服务器分区成多个虚拟独立专享服务器的技术。每个使用VPS技术的虚拟独立服务器拥有各自独立的公网IP地址、操作系统、硬盘空间、内存空间、CPU资源等，还可以进行安装程序、重启服务器等操作，与运行一台独立服务器完全相同。
D. 前后端分离的项目如何实现登录状态的保持。
前后端分离的项目一般会使用token实现登录状态的保持。
token其实就是一个随机字符串，当用户在登录页面输入账号和密码后，前端将账号密码发送给后端，后端检验完账号和密码后，会生成一个随机不重复的字符串即（token）,并将其响应给前端，前端拿到token后，需要在客户端进行持久化存储（一般会写在localStorage或者sessionStorage中，如果是SPA会存储在sessionStorage中，如果是MPA则存储在localStorage中），那么下次在向后端数据接口发送请求的时候，一般需要将token一并发送给后端数据接口，后端数据接口会对token进行校验，如果合法则正常响应请求，如果不合法，则提示未登录。
前端则根据本地存储中是否存在token判断用户是否处于登录状态。
E. 前端短信验证码登录可以自动登录吗
前端短信验证码登录可以自动登录。方法如下：
1、前端登录页面手机号验证码登录页面。按钮样式都是自己写的class，按钮实际上是用的div+a标签来实现的，添加了动态的样式。
2、前端获取验证码的函数。先进行手机号的判空处理，为空则提示用户不能为空，再使用正则表达式对手机号码进行限制。
3、后端获取验证码代码。从平台上获取相关参数，填入。调用它们平台提供的发送短信验证码的接口函数，查看是否发送成功，发送成功则将该phoneNum-verifyCode用键值对的形式存到redis数据库，有效时间为5分钟，5分钟之后自动过期，提示用户需要在5分钟之内填写完毕并登录。
4、注册功能前后端的实现。多几个判空条件（如名字、密码不能为空，用户是否存在，手机号是否已被注册，用户名是否已被注册），实现的流程相似，先通过手机获取验证码，将发送成功的验证码存到redis数据库，有效时间为5分钟，然后用户填写验证码，前端向后端发送请求，后端验证是否正确，正确则返回注册成功。
F. 前端单点登录如何实现
单点登录的思路是这样的，假定有个两个系统，A系统登录一次后，再访问B系统时是不需要登录的，当访问B系统时，就去登录系统判断是否有效，如果登录系统放行了，说明是已经登录过的。所以，需要建一个登录系统，从登录系统引出是否登录的判断，那么不管是哪个系统在访问需要验证是否登录的时候都去验证登录系统。
G. java web应用如何实现单点登录
单点登录（Single Sign On），简称为 SSO，是目前比较流行的企业业务整合的解决方案之一。SSO的定义是在多个应用系统中，用户只需要登录一次就可以访问所有相互信任的应用系统。实现单点登录需要两个部分的合作：统一的身份认证服务和修改Web应用，使得每个应用都通过这个统一的认证服务来进行身份效验。
H. web扫码登录怎么实现,思路是什么
1.前端调用后台生成二维码的API，获取到二维码图片和所包含的信息（通常是一个唯一ID）
2.前端检测（通过轮询或者websock，自己选择）是否有手机扫码，通过调用后台接口API，参数为上面的唯一ID
3.手机扫描二维码登陆，手机端可以获取到二维码里的信息ID，带上当前登陆用户ID和二维码里的ID调用后台接口。
后台存储这个二维码的数据，加上登录用户信息，当前台调用API时，给返回登录成功。
4.前端获取到登录成功，进行跳转
I. 前后端分离 前端怎么做到登录一个页面，其他页面也有信息
手打：
有以下常用的两种方式：
成功登录后后台返回你要的信息，利用html5中的本地缓存 ：localstorage 或者 sessionstorage。存在本地。需要时候取。具体用法 网络一大堆。
成功登录后后台返回你要的信息，跳转页面时候。直接跟在url以参数形式跨页面传值。这个比较麻烦。推荐第一种方式。
谢谢