vue-登录成功 保存 token ，根据 token 跳转路由

在路由跳转中我们会用到 登录成功后保存的 token

目的是为了 避免没有登录也能打开我们的项目操作页面

 

login.vue

this.$refs.loginForms.validate((valid) => {

                    if (valid) {

                        that.$post('/login',{

                            phone: that.loginForm.username,

                            password: that.loginForm.password

                        },function(ret){

                            that.loginLoading = false;

                            if(ret.msg == "success"){

                                sessionStorage.setItem("token","success");

                                that.$message({type: "success", message: "登录成功"})

                                return that.$router.replace("/home");

                            }else{

                              that.$message({type: 'error', message: ret.msg || '请检查您的用户名和密码'})

                            }

                        })

                    } else {

                        that.$message({type: 'error', message: '请检查您的用户名和密码'})

                        this.loginLoading = false;

                    }

                })

 

 

路由(router - index.js)：

 

// 导航守卫

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

  const token = sessionStorage.getItem('token');

  const outerPaths = ['/account/login', '/account/register', '/account/forget','/auth', '/home/system/wph_set', '/home/system/pdd_set']; // 当前 path 不需要登录也可以进入系统，但是只能操作当前页面

  if (!token && !outerPaths.includes(to.path)) {

    next('/account/login');

  } else {

    if(to.path == "/auth") {

      document.title = to.meta.title  // 进入这个页面会被更改页面标题

    } else document.title = 'CPS流量变现后台管理系统'

    next();

  }

});