vuex + axios 做登录验证并且保存登录状态的实例

发布时间：2020-12-16 23:33:38 所属栏目：百科来源：网络整理

导读：还是那句话，网上找个完整的博客真的难，实现效果全靠摸索啊第一步：安装axios 、vuex npm i -s axios npm i -s vuex 执行这两句，vue等环境搭建就不废话了第二步：配置main.js文件上图不上码，菊花万人捅，附上代码 Vue.use(VueParticles) ; Vue.use(

还是那句话，网上找个完整的博客真的难，实现效果全靠摸索啊

第一步：

安装axios 、vuex npm i -s axios npm i -s vuex 执行这两句，vue等环境搭建就不废话了

第二步：

配置main.js文件

上图不上码，菊花万人捅，附上代码

Vue.use(VueParticles) ;
Vue.use(iView,{ locale });
Vue.config.productionTip = false ;
Vue.prototype.$http = axios ;
Vue.use(Vuex) ;

const ADD_COUNT = 'ADD_COUNT'; // 用常量代替事件类型，使得代码更清晰
const REMOVE_COUNT = 'REMOVE_COUNT';
//注册状态管理全局参数
var store = new Vuex.Store({
state:{
token:'',userID:'',},mutations: {
//写法与getters相类似
//组件想要对于vuex 中的数据进行的处理
//组件中采用this.$store.commit('方法名') 的方式调用，实现充分解耦
//内部操作必须在此刻完成(同步)
[ADD_COUNT] (state,token) { // 第一个参数为 state 用于变更状态登录
sessionStorage.setItem("token",token);
state.token = token;
},[REMOVE_COUNT] (state,token) { // 退出登录

sessionStorage.removeItem("token",token);

state.token = token;
},}
});

router.beforeEach((to,from,next) => {
iView.LoadingBar.start();//loadong 效果

store.state.token = sessionStorage.getItem('token');//获取本地存储的token

if (to.meta.requireAuth) { // 判断该路由是否需要登录权限
if (store.state.token !== "") { // 通过vuex state获取当前的token是否存
next();
}
else {
next({
path: '/login',query: {redirect: to.fullPath} // 将跳转的路由path作为参数，登录成功后跳转到该路由
})
}
}
else {
next();
}
})

router.afterEach(route => {
iView.LoadingBar.finish();
});

/ eslint-disable no-new /
new Vue({
el: '#app',router,store,//注册组件
components: { App },template: ''
}) ;

第三步：

进行登录操作，调用main.js 中定义好的修改token的方法[ADD_COUNT]

附上请求部分代码

this.$store.commit('ADD_COUNT',json.data.token);

差点忘记了一点，在router中要配置需要验证是否登录的请求

附上router/index.js 代码

Vue.use(Router)

export default new Router({
mode: 'history',routes: [
{
path: '/login',//登录页
name: 'Login',component: Login
},{
path: '/',//首页
name: 'Main',component: Main,meta: {
requireAuth: true,// 添加该字段，表示进入这个路由是需要登录的
},{ path: '*',component: P404 } //这里是保证错误地址会跳转到404界面进行提示
]
})

这些方法的编写顺序可能没有体现出来，不过最终效果就是这个了，如果有疑问欢迎留言。

以上这篇vuex + axios 做登录验证并且保存登录状态的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持编程之家。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!