axios vue vuex登录 vuex做登录

转载

mob6454cc780924 2023-07-04 20:41:09

文章标签 axios vue vuex登录 Vue框架 Vue 数据保存用户名 文章分类 iOS 移动开发

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