㈠ Vue项目中用户登录及token验证及流程图
在前后端完全分离的情况下，Vue项目中实现token验证大致思路如下：
简单举例说明：
① 调登录接口成功，在回调函数中将token存储到localStorage和vuex中（login.vue中）
② store文件夹下的index.js
③ 路由守卫（router文件夹下的index.js）
④ 请求头加token
⑤ 如果前端拿到状态码为401，就清除token信息并跳转到登录页面
流程图：
㈡ 解决vuex刷新页面数据丢失
vue构建的项目中，vuex的状态存储是响应式的，当vue组件从store中读取状态的时候，若store中的状态发生变化，那么相应的组件也会得到高效刷新，问题来了，vuex存储的数据只是在页面中，相当于我们定义的全局变量，刷新之后，里面的数据就会恢复到初始化的状态。比如，用户已经登录了，我把登录状态放到state中了，一刷新页面，还要重新登录？购物车里的添加的数据，一刷新要重新添加？
vuex存取值一般都是放在computed计算属性中，但是一刷新页面的数据就没了
监听页面是否刷新，如果页面刷新了，将state对象存入到sessionStorage/localStorage中。页面打开之后，判断sessionStorage/localStorage中是否存在state对象，如果存在，则说明页面是被刷新过的，将sessionStorage/localStorage中存的数据取出来给vuex中的state赋值。如果不存在，说明是第一次打开，则取vuex中定义的state初始值。
㈢ vue项目实现用户登录 以及携带token
<article class="_2rhmJa">
调取登录接口 （首先明确一下要做到事情）
在前后端完全分离的情况下，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信息并跳转到登录页面
调取登录接口成功，会在回调函数中将token存储到localStorage和vuex中
1.<template>
<div>
</div>
</template>
export default {
data () {
},
methods: {
/////判读账号密码是否输入，没有则alert 出来
}
};
在store文件夹下的index.js 添加 token
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store({
state: {
},
mutations: {
}
});
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: [
]
});
// 导航守卫
// 使用 router.beforeEach 注册一个全局前置守卫，判断用户是否登陆
router.beforeEach((to, from, next) => {
if (to.path === '/login') {
} else {
}
});
export default router;
三、请求头加token 在 main.js中添加
// 添加请求拦截器，在请求头中加token
axios.interceptors.request.use(
config => {
},
error => {
});
token的过期可以自定义
四、如果前端拿到状态码为401，就清除token信息并跳转到登录页面
localStorage.removeItem('Authorization');
this.$router.push('/login');
</article>
66人点赞
前段学习
㈣ 登录时对于token的处理
在前后端完全分离的情况下，Vue项目中实现token验证大致思路如下：
1、用户输入账号密码，前端调后端的登陆接口，发送用户名和密码，
2、后端收到请求，验证用户名和密码，验证通过后（即登录成功），后端返回token给前端；
3、前端拿到token，将token存储到localStorage和vuex中，并跳转路由页面；
4、前端每次跳转路由，都要判断 localStroage 中有无 token ，没有就跳转到登录页面，有则跳转到对应路由页面（ 通过router.beforeEach((to, from, next)=>{.....}）)
5、每次调后端接口，都要在请求头中加上token；
6、后端判断请求头中有无token，有token，就拿到token并验证token，验证成功就返回数据，验证失败（例如：token过期）就返回编码401（编码由前台和后台约定好），请求头中没有token也返回编码401；
7、如果前端拿到状态码为401，则清除token信息并跳转到登录页面，并弹框提示用户当前缺少token或者token已失效，请重新登录；
一、调登录接口成功，在回调函数中将token存储到localStorage和vuex中
login.vue
store文件夹下的index.js
二、路由导航守卫
main.js
三、请求头加token，如果前端拿到状态码为401，就清除token信息并跳转到登录页面
㈤ 前端 vue 已登陆用户怎么处理
可以尝试用vuex做状态管理，当用户登录成功之后，将状态信息存放在相应的本地（如果是web端可以定义一个cookie，设置一下过期时间，如果是移动端，可以尝试放在localstorage）。登录之前做阻塞，去做这个状态信息的检测，通过就登录。没通过就路由到登录界面
㈥ vuex实现原理
vuex是在每个组件上注入this. store获取共享的状态，定义操作state的方法。
首先使用vue.use(vuex)表明vuex是vue的插件，只能被vue使用——实例化Store并传入参入——Store注入到根组件上。以上三个步骤便可以使用vuex实现数据在组件中的共享了。
当使用到vue.use的时候，会调用Store文件中的install方法，并可以获取到当前组件的执行期上下文。通过全局混合的方式，在每个组件上嵌入this.$store属性。
当Store类被实例化时，会执行constructor构造器并且传入option所需的参数，在对state、getters、mutations、actions编写。
1、实现state：理论上讲，直接把参数中的state赋值当前组件上即可，这样会引发一个问题，state的值无法动态改变。要使用state双向绑定可以直接使用vue实例中data方法，然后在通过get进行属性的截取。
2、实现getters：通过Ojbect.defineProperty监听getters值里面的变化，当获取值的时候，会触发get方法，返回并执行参数getters里面的方法。
3、实现mutations：把参数mutations里面的方法重新用一个变量去接收，作用是防止变量的全局污染。定义commit函数，当被执行时，触发定义mutaion对象里面的方法。
4、实现actions：方法同上，有个地方需要作出微调，传递的参数是当前的执行期上下文。
项目案例
㈦ 微前端quankun Vue应用 action+Vuex通信方式的实现
action + Vuex 通信主要是使用官方的 action 进行通信，之后再将值更新到 vuex 中
1、初始化 action
创建 src -> shared -> actions.js
2、在 Vue 组件中使用
1、把主应用中的初始化的action映射到微应用中
创建 src -> shared -> actions.js
2、在mounted的生命周期里注入actions实例
main.js
3、在 Vue 组件中使用
这样就实现 action + Vuex 的通信方式。
主要还是开篇这句话：
action + Vuex 通信主要是使用官方的 action 进行通信，之后再将值更新到 vuex 中
主要参考文章：
干坤官网通信API
微前端qiankun Vue应用间通信的思考
qiankun的简单使用和通信
㈧ 11 | 登录前端实现
前端任务点，编写登录请求函数，和 用户注册 类似，前端拿到用户名和密码发起 POST 请求。
收到 token 如何持久化存储，如何让每次请求都携带 token 是这里的点。
用户登录的接口详情可以点 这里 。
这里有可以优化的点，未来可能需要添加验证码等附加信息，这个时候就需要添加函数参数，就会比较麻烦，可以将参数数据格式包装成一个对象。当然，这里还是使用第一种方法了。
这不是重点，重点是登录成功后，我们要做的事情。
按照接口约定，登录成功我们可以得到如下信息：
这里我们要用到 token 字段，是我们现在有 token 了，但一刷新就没了，所以我们要做一下持久化存储，你想存哪里就存哪里，只要你能找到。这里就存储 localStorage 中了，在 Chorme86 中你甚至可以存到一个本地的文本文件中，只不过读取速度比较慢罢了。
除了 token，我们还要将用户信息存下来，比如首页展示用的用户头像等信息。
关于本地信息的安全性问题，本地保存的用户信息并不作为数据请求的凭证，仅供展示使用，当用户更改本地的用户信息对于登录的状态不会有影响，因为后端的判断依据是 token，token 有效就登录成功，而不是说本地存储的用户信息是谁服务端就认为你是谁，前端是不可信的。这种登录方式的危险点在于用户 token 被盗，但这很难避免，最不安全的是人。。。
登录成功，返回首页，用户名或者是用户头像并没有同步更新，这是因为，这里是单页应用，你在 login 页面将登录用户信息存到 localStorage 中，然后跳转到了首页，此时页面没有刷新，而 localStorage 中的信息没有及时更新到 DOM 中，此时的用户信息还是你没有进入 login 页面的用户信息，自然是无法展示的，怎么解决呢？很简单，刷新一下。
当页面刷新时，用户信息会从 localStorage 中读取，显示的就是现在的登录用户了，但。。。
我不想刷新。
也很简单，搞成响应式数据就好了呀。来人呀，上Vuex。
当你将 token 存在 cookie 中，前端并不需要主动设置，默认就携带传给了服务端，而这里我们存到 Authorization 中，就需要我们设置一下，拦截请求，在请求发送前添加 token。
好的，来捋一捋流程。
用户访问 /login，被前端路由处理，指向Login.vue，用户看到登录框，填入自己的账号，当用户填写账号时，name password被实时监听，同时会对登录按钮的可操作产生影响，只有当用户将账密输入完整时，登录按钮可用。
前端收集用户信息，调用 network 中封装的 longin 请求函数，该请求发送前被拦截，添加 token，可能为空，使用账密登录时，token没实际效用。
后端检查成功给响应，前端将响应中数据的 token 通过触发 mutations 更新 Vuex 中 state，同时，将该 token 存到 localStorage，以免用户关掉页面导致 token 丢失。
登录成功跳到应用首页，用户头像等信息通过 Vuex 获取，因为 Vuex 中的数据是响应式的，此时从 login 跳转到首页，用户头像等信息也会得到相应的更新。
当用户新增文章时，只需向服务器传文章数据就可以了，而对于文章作者的相关信息则由后端从请求头中的 token 解析得到，这里需要注意，前端不要将本地的用户信息作为准确的作者信息，对于用户可以伪造的信息要做最小化的信任，用户完全有能力将本地用户名从张三改为李四，而最终作者是那个则需要由用户提供的 token 来判定，虽说 token 也有可能被伪造，但难度相对较大，往往是被窃取的可能性更大。
无密码登录其实还是需要“密码”的，只不过是换了一个临时性的对人不可读的字符串来代替罢了，并且每次请求帮你填好了。
在不考虑安全性的情况下本质上其实就是你将密码存到了浏览器里，然后你每次访问网站时让浏览器帮你输入用户名和密码，这个过程你是无感知的，这样自己就不用像个憨憨一样每次刷新就要填一遍表单。
填表是一件非常无聊的事。
要学一波 TypeScript 了呀。
㈨ 论文网站登录注册怎么实现
论文网站的登录注册和其他网站都是大同小异的。今天就谈谈怎么实现的吧首先我们看登录逻辑
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信息并跳转到登录页面
在前端中，登录注册需要通过端口来获取数据并传递参数，并进行判断事件的执行获取得到的登录信息以及一个token值
token是服务端生成的一串字符串，以作客户端进行请求的一个令牌,
它相当于数据的id，给与数据一个唯一的标识，它的出现主要目的是解决服务器频繁请求用户姓名以及密码的问题；
它的作用是减轻服务器的压力，减少频繁的查询数据库，使服务器更加健壮。
// 请求登录接口并传递参数
this.$ClientAPI
.loginGetToken(obj)
.then((res) => {
console.log(res.data.data);
var token = res.data.data.remember_token; //读取token
var mobile = res.data.data.mobile;
localStorage.setItem("mobile", mobile);
localStorage.setItem("token", token); //保存token
localStorage.setItem("value", "admin");
Toast.success({
message: "登录成功",
position: "top",
});
this.$router.push("/mine"); //跳转到我的页面
})
.catch((err) => {
console.log(err);
Toast.fail({
message: "登录失败",
position: "top",
});
㈩ Vuex4.x（一）初识vue3的状态管理-state
Vuex 是一个专为 Vue.js 应用程序开发的 状态管理模式 。它采用集中存储管理应用的所有组件的状态的方式，并以相应的规则保证状态以一种可预测的方式发生变化。
Vuex 也集成到 Vue 的官方调试工具 devtools extension (opens new window)，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。
两种使用方法：
https://next.vuex.vuejs.org/
官方给了两个流程图，一个简单的，我们就不看了。
还有一个复杂一点的，如下图：
应该没有翻译错吧。
组件问vuex，用户登录了没？vuex就只能问后端。
等等，不是应该在前端缓存一个登录状态吗？
用户在登录页面完成登录后，后端会返回一个token，然后缓存在前端，以后其他地方问是否登录，直接看这个token不就可以了吗？为啥还有问后端要数据？
如果不需要的话，我就想不出来还有啥状态关系到后端API了。
所以另一个理解就是，vuex其实是支持直接从后端获取数据，然后存入state的，也就是说可以把state当作大号data来看待。
我在这个流程里面加上了一个前端存储的功能，也就是说可以把 state 存在前端，这样刷新、关掉浏览器、关机重启等情况，state 的数据都不会丢失了。便于恢复状态。
我们先来定义一个简单的state，看看在vue3里面有什么变化。
一个简单类型（number）的count，还有一个引用类型的myObject。
我们打印出来看看效果：
未完待续。。。
https://naturefwvue.github.io/nf-vue-cnd/cnd/project-vuex/
https://github.com/naturefwvue/nf-vue-cnd/tree/main/cnd/project-vuex