分享一个简单的vue路由守卫

海星吧 2019-12-25 4495

//原文来自https://segmentfault.com/a/1190000016040068

//设置路由守卫

---main.js:

router.beforeEach((to, from, next) => {

let getFlag = sessionStorage.getItem("Flag");

//如果登录标志存在且为isLogin,即用户已登录

if (getFlag === "isLogin") {

//设置vuex登录状态为已登录

store.state.isLogin = true

next()

//如果已登录,还想想进入登录注册界面,则定向回首页

if (!to.meta.isLogin) {

next({

path: '/admin'//首页的path路径

})

}

//如果登录标志不存在,即未登录

} else {

//用户想进入需要登录的页面,则定向回登录界面

if (to.meta.isLogin) {

next({

path: '/login',//登录页的path路径

})

//用户进入无需登录的界面,则跳转继续

} else {

next()

}

}

})


---router---index.js:

//登录页

meta: {

isLogin: false

}

//首页

meta: {

isLogin: true

}

---登录页.vue的登录方法:

//请求登录的方法名:login

login(){

this.axios.请求方式("接口",{请求参数}).then(res=>{

//登录成功之后

this.$store.dispatch("userLogin", true);

sessionStorage.setItem("Flag", "isLogin");//设置登录状态

})

}


---store.js

const store = new Vuex.Store({

state: {

isLogin: false,

},

getters: {

//获取登录状态

isLogin: state => state.isLogin,

},

actions: {

//获取登录状态

userLogin({

commit

}, flag) {

commit("userIsLogin", flag)

},

},

mutations: {

userIsLogin(state, aisLogin) {

state.isLogin = aisLogin;

},

}

})


以下是我自己项目里用到的。

/router/index.js

            {

path: '/',

redirect: {

name: 'login'

},

},

{

path: '/login',

name: 'login',

component: resolve => require(['@/view/login/login'], resolve),

meta: {

isLogin: false

}

},

{

path: '/admin',

name: 'admin',

component: resolve => require(['@/view/index/admin'], resolve),

meta: {

isLogin: true

}

},

/main.js

//如果后台是根据cookie判断的话要加这一条

//axios.defaults.withCredentials = true;//让axios请求留下cookie,默认是不会有的

router.beforeEach((to, from, next) => {

let getFlag = sessionStorage.getItem("Flag");

if (getFlag === "isLogin") {

store.state.isLogin = true

next()

if (!to.meta.isLogin) {

next({

path: '/admin'

})

}

} else {

if (to.meta.isLogin) {

next({

path: '/login',

})

} else {

next()

}

}

})

/login/login.vue

      ---  html    

                <ul>

<li>

<span class="iconfont iconyonghu"></span>

<input v-model="account" placeholder="用户名" type="text">

</li>

<li>

<span class="iconfont iconmima"></span>

<input v-model="password" placeholder="密码" type="password">

</li>

</ul>

<button class="login-button" @click="Login">登录</button>

        ---script

                    data:

                                account:'',//123456

password:'',//123456

                methods:

                        Login(){

let account = this.account;

let password = this.$md5(this.password) ;//$md5 npm下的加密组件

// let password = this.password;

console.log("password",password)

this.$http.post(this.$api+"/manage/manageLogin",{account,password}).then(res=>{

console.log(res)

let _res = res.data

let code = res.data.code

let msg = res.data.msg

console.log(code)

if(code != 200){

this.$message.error(msg)

}else{

this.$store.dispatch("userLogin", true);

sessionStorage.setItem("Flag", "isLogin");//设置登录状态

this.$router.push({name:'admin'})

this.$message("登录成功")

}

}).catch(e=>{

this.$message.error(e)

})

}


/modules/store.js

state: {

isLogin: false,

},

getters: {

//获取登录状态

isLogin: state => state.isLogin,

},

actions: {

//获取登录状态

userLogin({

commit

}, flag) {

commit("userIsLogin", flag)

},

},

mutations: {

userIsLogin(state, aisLogin) {

state.isLogin = aisLogin;

},

}



弱鸡程序员年底还在加班
最新回复 (6)
  • 薛定谔 2019-12-25
    0 2
    完全看不懂......
    现在学习中,非常忙。偶尔还是回来看看的!
  • 海星吧 2019-12-25
    1 3
    薛定谔 完全看不懂......
    一般会用vue的就知道了。
    弱鸡程序员年底还在加班
  • Roogle 2019-12-25
    0 4
    额,还在用PHP的程序员感慨时间真快
    🐏阳了
  • 海星吧 2019-12-26
    0 5
    Roogle 额,还在用PHP的程序员感慨时间真快
    老哥玩php的嘛。看来是工作很久了。有没有php的教程,想学习学习。。
    弱鸡程序员年底还在加班
  • Roogle 2019-12-26
    0 6
    海星吧 老哥玩php的嘛。看来是工作很久了。有没有php的教程,想学习学习。。
    没有呢,我是自学的
    🐏阳了
  • 海星吧 2019-12-26
    0 7
    Roogle 没有呢,我是自学的
    自学牛批。
    弱鸡程序员年底还在加班
    • ACG里世界
      8
          
返回
发新帖