vuex实现登录状态的存储,未登录状态不允许浏览的方法


Posted in Javascript onMarch 09, 2018

基础思路就是使用vuex状态管理来存储登录状态(其实就是存一个值,例如token),然后在路由跳转前进行登录状态的判断,可以使用vue-router的全局前置守卫beforeEach,也可以使用路由独享的守卫beforeEnter。

导航守卫

正如其名,vue-router``` 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中:全局的, 单个路由独享的, 或者组件级的。 记住参数或查询的改变并不会触发进入/离开的导航守卫。你可以通过观察 $route 对象来应对这些变化,或使用beforeRouteUpdate的组件内守卫。

完整的导航解析流程

1、导航被触发。

2、在失活的组件里调用离开守卫。

3、调用全局的 beforeEach 守卫。

4、在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。

5、在路由配置里调用 beforeEnter。

6、解析异步路由组件。

7、在被激活的组件里调用 beforeRouteEnter。

8、调用全局的 beforeResolve 守卫 (2.5+)。

9、导航被确认。

10、调用全局的 afterEach 钩子。

11、触发 DOM 更新。

12、用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。

全局守卫

你可以使用 router.beforeEach注册一个全局前置守卫

const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
 // ...
})

当一个导航触发时,全局前置守卫按照创建顺序调用。守卫是异步解析执行,此时导航在所有守卫 resolve 完之前一直处于 等待中。

每个守卫方法接收三个参数:

to: Route:即将要进入的目标 路由对象

from: Route:当前导航正要离开的路由

next: Function:一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。

next():进行管道中的下一个钩子。如果全部钩子执行完了,则导航的状态就是 confirmed (确认的)。

next(false):中断当前的导航。如果浏览器的 URL 改变了(可能是用户手动或者浏览器后退按钮),那么 URL 地址会重置到 from 路由对应的地址。

next('/')或者next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断,然后进行一个新的导航。

next(error):(2.4.0+) 如果传入 next 的参数是一个 Error 实例,则导航会被终止且该错误会被传递给 router.onError()注册过的回调。

确保要调用 next 方法,否则钩子就不会被 resolved。

路由独享的守卫

你可以在路由配置上直接定义beforeEnter守卫:

const router = new VueRouter({
 routes: [
  {
   path: '/foo',
   component: Foo,
   beforeEnter: (to, from, next) => {
    // ...
   }
  }
 ]
})

还有其他部分守卫,详情可以看官方文档https://router.vuejs.org/zh-cn/advanced/navigation-guards.html

安装vuex后

创建store.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
const state = {
  isLogin: 0
}
const mutations = {
  changeLogin(state,status){
    state.isLogin = status;
  }
}
const actions = {
  loginAction({commit}){
    commit('changeLogin',1);
  }
}
export default new Vuex.Store({
  state,
  actions,
  mutations
})

login.vue中

引入import { mapActions,mapState } from 'vuex'

接着进行登录状态的改变,base_url就是路径

export default {
    name: 'Login',
    data(){
      return{
        loginForm: {
          username: '',
          password: '',
        },
        rules: {
          username: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' }
          ],
        },
        showLogin: false
      }
    },
    mounted(){
      this.showLogin = true;
    },
    computed: {
      ...mapState(['isLogin'])
    },
    methods: {
      ...mapActions(['loginAction']),
      submitForm(formName){
        this.$refs[formName].validate((valid) => {
          if(valid){
            if(this.loginForm.username == 'aaa' && this.loginForm.password == '111'){
              console.log('验证通过');
              this.loginAction();
              this.$router.push('manage');
            }else{
              console.log('账号密码出错');
              // this.$message.error('账号密码出错');
              this.$message({
                type: 'error',
                message: '账号密码出错'
              });
            }
            console.log('请求地址: ' + base_url);
          }else{
            console.log('验证失败');
            return false;
          }
        })
      }
    }
  }

接下去只要使用路由守卫即可

beforeEach使用实例

router.beforeEach((to,from,next)=>{
  if(to.meta.check){
    var check = async function(){
      const result = await checkUser();
      if(result.status == 0){
        next();
      }else{
        alert('用户未登录');
        next({path: '/login'});
      }
    }
    check(); //后台验证session
  }else{
    next();
  }
})

beforeEnter使用实例

export default new Router({
  routes: [
    {
     path: '/login',
     component: Login
    },
    {
      path: '/manage',
      name: '',
      component: Manage,
      beforeEnter: (to,from,next)=> {  //导航守卫
      console.log(to)
      console.log(from)
      if(store.state.isLogin == 1){
       console.log('用户已经登录');
       next();
      }else{
       console.log('用户未登录');
       next({path: '/login',query:{ Rurl: to.fullPath}}); //未登录则跳转到登陆界面,query:{ Rurl: to.fullPath}表示把当前路由信息传递过去方便登录后跳转回来
     }
   } 
    }
   ]
})

以上这篇vuex实现登录状态的存储,未登录状态不允许浏览的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
有趣的JavaScript数组长度问题代码说明
Jan 20 Javascript
jquery 之 $().hover(func1, funct2)使用方法
Jun 14 Javascript
JS中toFixed()方法引起的问题如何解决
Nov 20 Javascript
JQuery的read函数与js的onload不同方式实现
Mar 18 Javascript
判断一个变量是数组Array类型的方法
Sep 16 Javascript
[将免费进行到底]在Amazon的一年免费服务器上安装Node.JS, NPM和OurJS博客
Aug 18 Javascript
js轮播图无缝滚动效果
Jun 17 Javascript
十大 Node.js 的 Web 框架(快速提升工作效率)
Jun 30 Javascript
jQuery图片查看插件Magnify开发详解
Dec 25 jQuery
浅析JavaScript异步代码优化
Mar 18 Javascript
vue.js页面加载执行created,mounted的先后顺序说明
Nov 07 Javascript
测量JavaScript函数的性能各种方式对比
Apr 27 Javascript
详解react关于事件绑定this的四种方式
Mar 09 #Javascript
vue+vuex+axios实现登录、注册页权限拦截
Mar 09 #Javascript
Vue2.0结合webuploader实现文件分片上传功能
Mar 09 #Javascript
vue + vuex todolist的实现示例代码
Mar 09 #Javascript
vue实现在表格里,取每行的id的方法
Mar 09 #Javascript
vue移动端UI框架实现QQ侧边菜单组件
Mar 09 #Javascript
vue的安装及element组件的安装方法
Mar 09 #Javascript
You might like
利用discuz自带通行证整合dedecms的方法以及文件下载
2007/03/06 PHP
PHP 防恶意刷新实现代码
2010/05/16 PHP
PHP 面向对象程序设计(oop)学习笔记(一) - 抽象类、对象接口、instanceof 和契约式编程
2014/06/12 PHP
PHP使用strstr()函数获取指定字符串后所有字符的方法
2016/01/07 PHP
ThinkPHP实现转换数据库查询结果数据到对应类型的方法
2017/11/16 PHP
在子窗口中关闭父窗口的一句代码
2013/10/21 Javascript
js图片向右一张张滚动效果实例代码
2013/11/23 Javascript
基于豆瓣API+Angular开发的web App
2015/01/02 Javascript
对JavaScript客户端应用编程的一些建议
2015/06/24 Javascript
html+js实现简单的计算器代码(加减乘除)
2016/07/12 Javascript
新闻上下滚动jquery 超简洁(必看篇)
2017/01/21 Javascript
Angular 2.x学习教程之结构指令详解
2017/05/25 Javascript
jquery处理checkbox(复选框)是否被选中实例代码
2017/06/12 jQuery
Webstorm2016使用技巧(SVN插件使用)
2018/10/29 Javascript
JS事件绑定的常用方式实例总结
2019/03/02 Javascript
详解Vue中CSS样式穿透问题
2019/09/12 Javascript
详解Python中的type()方法的使用
2015/05/21 Python
python查看微信好友是否删除自己
2016/12/19 Python
python处理xml文件的方法小结
2017/05/02 Python
python实现rsa加密实例详解
2017/07/19 Python
Python动态生成多维数组的方法示例
2018/08/09 Python
Python实现八皇后问题示例代码
2018/12/09 Python
Python3.5装饰器典型案例分析
2019/04/30 Python
python3.7将代码打包成exe程序并添加图标的方法
2019/10/11 Python
python实现复制文件到指定目录
2019/10/16 Python
将labelme格式数据转化为标准的coco数据集格式方式
2020/02/17 Python
pygame用blit()实现动画效果的示例代码
2020/05/28 Python
ProBikeKit澳大利亚:自行车套件,跑步和铁人三项装备
2016/11/30 全球购物
DIY蛋糕店的创业计划书范文
2013/12/26 职场文书
新郎新娘婚礼答谢词
2014/01/11 职场文书
装饰活动策划方案
2014/02/11 职场文书
趣味运动会活动方案
2014/02/12 职场文书
工会趣味活动方案
2014/08/18 职场文书
志愿者爱心公益活动策划方案
2014/09/15 职场文书
财务会计求职信范文
2015/03/20 职场文书
go语言中GOPATH GOROOT的作用和设置方式
2021/05/05 Golang