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

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

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

第二步：配置main.js文件

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

//要用“导入”命令加载的某视频剪辑软件构建版本//(仅运行时或独立)已在webpack.base.conf中用别名进行了设置。从“Vue”导入Vue "从应用导入"。/App "从导入路由器"。/router '从iView '导入iView导入“iview/dist/style/iview。CSS”；从" iview/dist/locale/en-US "导入区域设置；从"粒子"导入粒子；从“axios”导入axios从“Vuex”//导入状态管理引入状态管理vue。使用(VueParticles)；Vue.use(iView，{ locale })；vue。配置。生产提示=假；Vue.prototype. $ http=axiosvue。使用(Vuex)；const ADD _ COUNT=' ADD _ COUNT//用常量代替事件类型，使得代码更清晰const REMOVE _ COUNT=' REMOVE _ COUNT '；//注册状态管理全局参数var store=new Vuex .存储({ state:{ token: ' '，userID: ' '，})，经过必要的修改后为： { //写法与吸气剂相类似//组件想要对于状态管理中的数据进行的处理//组件中采用这个$store.commit('方法名)的方式调用，实现充分解耦//内部操作必须在此刻完成（同步)[ADD_COUNT](状态，令牌){ //第一个参数为状态用于变更状态登录sessionStorage.setItem('token '，token)；state.token=token}，[REMOVE_COUNT](状态，令牌){ //退出登录会话存储。移除项目(' token '，token)；state.token=token}，} })；router.beforeEach((to，from，next)={ iView .装载杆。start()；//loadong效果商店。国家。token=会话存储。getitem(' token ')；//获取本地存储的令牌if (to.meta.requireAuth) { //判断该路由是否需要登录权限if (store.state.token！=='') { //通过状态管理州获取当前的代币是否存next()；} else { next({ path: '/login '，查询： {重定向：到。完整路径}//将跳转的路由小路作为参数，登录成功后跳转到该路由})} } else { next()；} })路由器。每次之后(路由={ iView .装载杆。finish()；});/* ESL int-禁用无新*/新Vue({ el: '#app '，路由器，商店，//注册组件组件： { App }，模板： ' App/' })；第三步：进行登录操作，调用main.js中定义好的修改代币的方法[ADD_COUNT]

附上请求部分代码

这个$http({ method: 'get '，url: '/api/login '，}).然后(函数(RES){ var JSON=RES . data console。日志(JSON。数据)；这个$Message.success('Success！');这个$store.commit('ADD_COUNT '，JSON。数据。令牌)；让时钟=窗口。setinterval(()={ this。总时间-；如果(这个。总时间0){ window。clearinterval(时钟)；这个$正在加载。finish()；这个$路由器。push('/')；} },1000)}.绑定（这个))。catch(function(err){ this .$Message.error('登录失败，错误：' err)；这个$正在加载。错误()；}.绑定（这个))差点忘记了一点，在路由器中要配置需要验证是否登录的请求

附上路由器/索引。射流研究…代码

从“vue”导入某视频剪辑软件从“vue路由器”导入路由器从" @/组件/登录/登录"导入P404从" @/components/404/404 "导入主要的从" @/组件/主"导入用户(路由器)导出默认新路由器({ mode: 'history '，route :[{ path : '/log in '，//登录页名称："登录",组件：登录},{路径： '/',//首页名称：“主”，组件： Main，元： { requireAuth: true，//添加该字段，表示进入这个路由是需要登录的}，}，{ path: '*，component: P404 } //这里是保证错误地址会跳转到404界面进行提示]})这些方法的编写顺序可能没有体现出来，不过最终效果就是这个了，如果有疑问欢迎留言。

以上vuex axios做登录验证和保存登录状态的例子，都是边肖分享的内容。希望能给大家一个参考，支持我们。