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

作者:分分快三计划

路由写法

vuex完成登陆情形的累积,未登陆状态不相同意浏览的格局,vuex未登陆

底子思路正是选用vuex状态管理来存款和储蓄登陆状态(其实正是存四个值,举例token卡塔尔(英语:State of Qatar),然后在路由跳转前行行登陆状态的论断,能够运用vue-router的全局前置守卫beforeEach,也能够行使路由独享的看守beforeEnter。

导航守卫

正如其名,vue-router``` 提供的导航守卫重要用以通过跳转或吊销的艺术守护导航。有各个火候植入路由导航进度中:全局的, 单个路由独享的, 或然零件级的。 记住参数或询问的变动并不会接触步向/离开的领航守卫。你能够通过观看 $route 对象来应对这个变迁,或利用beforeRouteUpdate的组件内守卫。

全体的领航剖析流程

1、导航被触发。

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

3、调用全局的 beforeEach 守卫。

4、在接收的机件里调用 beforeRouteUpdate 守卫 (2.2 卡塔尔(英语:State of Qatar)。

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卡塔尔国:中断当前的领航。假如浏览器的 U兰德汉兰达L 纠正了(恐怕是顾客手动依然浏览器后退按键),那么 U中华VL 地址会重新载入参数到 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) => {
    // ...
   }
  }
 ]
})

还恐怕有其余一些守卫,详细情形能够看官方文书档案

安装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落成登陆景况的仓库储存,未登入状态差别意浏览的主意便是作者分享给大家的全部内容了,希望能给大家贰个参照,也冀望我们多都赐教帮客之家。

根基思路正是行使vuex状态管理来储存登入意况(其实就是存叁个值,比方...

vue-router 的路由跳转的主意

率先种 : 编制程序式的领航

<router-link to="/" tag="p">耳机频道</router-link>
//to是一个prop.指定需要跳转的路径,也可以使用v-bind动态设置
//tag可以指定渲染成标签,默认是a标签
<router-link to="/" replace>跳转回去</router-link>   
//这样的写法是不会留下历史痕迹,回退键无效
<router-link :to="{ name: 'product', params: { id : 1 }}">User</router-link>
// /product/1

第三种 : 函数式的领航

//这里假设 我要跳转product页面并且附带参数id  
//这里定义好了list.id 就是 动态的值
this.$router.push('./product/'   list.id)                       // 字符串的方式进行描述
this.$router.push({name : 'product',params: { id : list.id }})    // 命名的路由的方式进行描述
this.$router.push({ path: `/product/${list.id}` })               // 直接定义path类似第一种
//比较常用的跳转路由的方法
//假如是带查询参数
router.push({ path: 'product', query: { id: list.id }})            // /product?id=1

本条方法会向 history 栈加多一个新的记录,所以,当客户点击浏览器后退按键时,则赶回此前的 U普拉多L。

当您点击 <router-link> 时,那么些方法会在其间调用,所以说,点击 <router-link :to="..."> 等同于调用 router.push(...)

值得注意的一些是,假若提供了 path,params 的布置将不会卓有成效

还或许有黄金年代对主意

router.replace      //它不会向 history 添加新记录,而是跟它的方法名一样 —— 替换掉当前的 history 记录
router.go(1)        //在浏览器记录里面前进一步,等于history.forward()
router.go(-1)       //后退一步记录,等同于 history.back()
router.go(n)        //浏览器记录前进3步

基本使用大致好似此多
再有 命名视图 路由重定向 等等需求的请看官方网址

基本知识大约就这么多

  routes: [
    {
        path: '/cart',
        name: 'cart',
        component: cart,
        meta :{ title: "购物车"}               //用于给定网页名
    }
 ]

到现在说说正题 afterEach beforeEach那三个导航守卫的不一致

正如其名,vue-router 提供的导航守卫首要用来通过跳转或撤消的方法守护导航。有多样机缘植入路由导航进度中:全局的, 单个路由独享的, 只怕零件级的。

记住参数或询问的转移并不会接触走入/离开的领航守卫

在全局守卫里面

beforeEach 全局前置守卫

当一个导航触发时,全局前置守卫遵照创立顺序调用。

各类守卫方法选择多个参数:

  • to: Route: 即就要步入的对象 路由对象
  • from: Route: 当前导航正要离开的路由
  • next: Function: 应当要调用该办法来 resolve 这么些钩子。推行职能信任 next 方法的调用参数。
router.beforeEach((to, from, next) => {
   console.log(to);    //即将要进入的路由对象
   console.log(from);  //当前导航要离开的路由对象

   next();             //调用该方法,才能进入下一个钩子
})
//这样写就可以明显的看出每个参数的意义

next(): 进行政管理道中的下一个钩子。借使全数钩子施行完了,则导航的状态就是 confirmed (确认的)。

next(false)vuex实现登录状态的存储,未登录状态不允许浏览的方法,vuex未登录【分分快三计划】。: 中断当前的领航。要是浏览器的 UCRUISERL 更动了 (恐怕是顾客手动依旧浏览器后退开关卡塔尔(英语:State of Qatar),那么 UPAJEROL 地址会重新设置到 fromvuex实现登录状态的存储,未登录状态不允许浏览的方法,vuex未登录【分分快三计划】。 路由相应之处。

next('/') 或者 next({ path: '/' }): 跳转到贰个不等之处。当前的导航被暂停,然后开展叁个新的领航。你能够向 next 传递大叁地方对象,且允许设置诸如 replace: truename: 'home' 之类的选项以致别的用在 router-link 的 to prop 或 router.push 中的选项。

承保要调用 next 方法,不然钩子就不会被 resolved

afterEach 全局前置钩子

router.afterEach((to, from) => {
  // ...
})

可是和防止不一样的是,这个钩子不会选取 next 函数也不会转移导航本身

从利用的角度来讲 前置钩子尤其常用,举例登陆验证 以致给Vue单页面援用规定网页名等等

router.beforeEach((to,from,next) => {
  if(to.meta.title) {
    document.title = to.meta.title;    //在路由里面写入的meta里面的title字段
  }
  next();
})

组件内的看守vuex实现登录状态的存储,未登录状态不允许浏览的方法,vuex未登录【分分快三计划】。请看官方网址的例证

行使vue-cli作为支出前提 vue-router已经布署好了

​ vue-router作为vue里面最底子的劳务,学习意气风发段时间,对遭受的必要实行部分总括

本文由分分快三计划发布,转载请注明来源

关键词: 分分快三计划