Vue实现用户登录管理
vuex + cookie + router
业务流程：
1、用户在注册时提交信息，后端生成用户的数据
2、用户登录时通过网页表单提交用户名和密码，后台根据提交的数据生成token，与数据库进行匹配，并给前端返回信息。
3、前端调用方法将后台返回的token数据保存到cookie中，再调用store的login方法，将user保存到vuex中。每次页面刷新时，vuex取cookie中数据并更新store中state的Authorization。
4、用户登出时调用 logout 方法，清除cookie记录
vuex用于组件间的传值，同时存储在内存中，cookie常用于与服务器端沟通。生命期长度符合登录需求
vuex方便组件状态管理。cookie方便在页面刷新时保存登录记录
状态保存（cookies）
前端调用vuex的changeLogin方法将后台返回的token数据保存到cookie中，当有login和logout方法被调用时，操控cookie：
login(values).then(res=>{
console.log("success");
if(res){
const loginsuccess = '登录成功'
this.open1(loginsuccess,'loginsuccess')
this.$router.push('/user');
}
values.userPassword = res.userPassword;
this.$store.commit('changeLogin',values)
console.log(res);
})
}catch(error){
console.log(error);
}
利用jscookie.js操作cookie
import Cookies from "js-cookie";
const TokenKey = 'test';
export function getToken(){
return Cookies.get(TokenKey)
}
export function setToken(token){
return Cookies.set(TokenKey,token);
}
// 删除方法
export function removeToken() {
return Cookies.remove(TokenKey)
}
这时vuex全局保存一个Authorization，每次刷新页面时从cookie中获取当前登录状态更新到store中
import Vue from 'vue'
import Vuex from 'vuex'
import { setToken } from '@/util/jscookie.js'
Vue.use(Vuex)
const store = new Vuex.Store({
state:{
Authorization: ""
},
mutations:{
changeLogin(state,user){
state.Authorization = user.Authorization;
setToken(state.Authorization);
}
}
})
export default store
某些页面设置权限之后才访问 （meta）
利用Vue Router 的元信息meta属性，在接收属性对象上实现。
meta 是放在某些路由上的属性，在使用到路由需要判断是否进一步处理的情况下使用。通常在导航守卫中根据其状态对路由进行操作
{
//登录
path:'/user',
name:'Logined',
component:()=> import('../page/UserManage.vue'),
meta:{
isLogined:true
}
}
设置完meta属性后，接下来就是在 router.beforeEach对其进行操作
官网优化了to.matched.some。改为to.meta.xxxx 避免去访问被当前路由命中的每条路由记录
//路由较少，就把登录路由和其他路由编写到一起了
router.beforeEach((to,from,next)=>{
if(from.fullPath != '/'){ //if避免循环 recursion
let loginFlag = getToken();
if(to.meta.isLogined && loginFlag != 'test'){
next();
}else{
next({
path:'/'
})
}
}else{
next();
}
})
用户cookie过期（logout）后跳转到登录页，重新进行身份认证 redirect
cookie和webstorage
cookie 文本文件常用于记录用户名、密码、浏览的网页、停留的时间等等信息，服务器会读取cookie，来判断使用者方便服务。
cookie生存时间：
- cookie的生存周期时间，默认情况下浏览器关闭后就会消失（会话cookie，保存在内存中）
- 若设置了过期时间，浏览器会将cookie存入到硬盘中。等到下次打开浏览器中，cookie依然有效直到超过设定的过期时间
localstorge是持久化的本地存储，sessionstorge仅用于会话（一个页面）级别的存储，并不永久
storage与cookie区别在于
-
存储大小：storage本地存储大量存储数据,cookie用于客户端与服务网的的信息传递
-
API区别：storage有一系列方法，cookie需要自己封装
-
服务器交互区别：cookie存储量小，数量小，每次http都会被发送到服务端，影响效率