登录页面

//validate.js
export function isvalidUsername(str) {
  const valid_map = ['admin', 'editor']
  return valid_map.indexOf(str.trim()) >= 0
}

//登录页面引入validate.js
import { isvalidUsername } from '@/utils/validate'

methods: {
  handleLogin() {
	let that = this;
	that.$refs.loginForm.validate(valid => {
	  if (valid) {
		that.loading = true;
		that.$http.post('/api/login',{
		  loginInfo:that.loginForm
		}).then((response)=>{
		  if(response.data.code === 200){
			that.loading = false;
			//保存登录用户名到cookie中
			var username = that.loginForm.username;
			var pwd_md5 = md5(that.loginForm.password);
			setCookie(LOGIN_SESSION_TOKEN,username,1);
			setCookie(LOGIN_SESSION_TOKEN_PWD,pwd_md5,1);
			if(that.$route.query.redirect) {
			  that.$router.push(this.$route.query.redirect);
			} else {
			  that.$router.push('/admin/articles');
			}
		  }else{
			that.loading = false;
			that.$message({
			  message: response.data.message,
			  type: 'error'
			});
		  }
		})
	  }
	})
  }
}

vue-router权限校验

通过vue-router验证后台页面是否登录

/**
 * 权限校验:
 *  Vue Router中的 前置钩子函数 beforeEach(to,from,next)
 *  当进行路由跳转之前,进行判断 是否已经登录过, 登陆过则允许访问非登录页面,否则回到登录页
 * 
 *  to: 即将要进入的目标路由对象
 *  from:即将要离开的路由对象
 *  next: 是一个方法,可以指定路由地址,进行路由跳转
 */
router.beforeEach((to,from,next)=>{
  if(to.meta.requireAuth){
    var username = getCookie(LOGIN_SESSION_TOKEN);
    var password = getCookie(LOGIN_SESSION_TOKEN_PWD);
    fetch('/api/admin/getLoginInfo?username='+username).then((response)=>{
      if(response.code === 200){
        if(md5(response.data.password) === password){
          next();// 放行路由
        }else{
          next({
            path:'/admin/login',
            query:{redirect:to.fullPath}
          })
        }
      }else{
        next({
          path:'/admin/login',
          query:{redirect:to.fullPath}
        })
      }
    })
  }else{
    next();
  }
});

其中 fetch 方法的实现如下:

/**
 * fetch 请求方法
 * @param url
 * @param params
 * @returns {Promise}
 */
export function fetch(url, params = {}) {
  return new Promise((resolve, reject) => {
    axios.get(url, {
      params: params
    }).then(response => {
        resolve(response.data);
    }).catch(err => {
        reject(err)
    })
  })
}

后端接口权限

vue不同组件都要用到axios,我们在全局为axios添加request和response的拦截器。

也就是,在发起请求之前,先检测header是否携带token信息。在接收响应之前,先查看后端返回状态码,如果说需要token验证就跳转到登录界面。

新增一个http.js文件,代码如下:

import axios from 'axios' //引用axios
// axios 配置
axios.defaults.timeout = 5000;
if(process.env.NODE_ENV=="production"){
  axios.defaults.baseURL = 'http://www.dupengnet.com/'; //这是调用数据接口
}else{
  axios.defaults.baseURL = 'http://localhost:8080/'; //这是调用数据接口
}
// http request 拦截器,通过这个,我们就可以把Cookie传到后台
axios.interceptors.request.use(
  config => {
    const token = getCookie(LOGIN_SESSION_TOKEN); //获取Cookie
    config.data = JSON.stringify(config.data);
    config.headers = {
      'Content-Type':'application/x-www-form-urlencoded' //设置跨域头部
    };
    if (token) {
      config.params = {'token': token} //后台接收的参数,后面我们将说明后台如何接收
    }
    return config;
  },
  err => {
    return Promise.reject(err);
  }
);
// http response 拦截器
axios.interceptors.response.use(
  response => {
//response.data.errCode是我接口返回的值,如果值为2,说明Cookie丢失,然后跳转到登录页,这里根据大家自己的情况来设定
    if(response.data.errCode == 2) {
      router.push({
        path: '/admin',
        query: {redirect: router.currentRoute.fullPath} //从哪个页面跳转
      })
    }
    return response;
  },
  error => {
    return Promise.reject(error.response.data)
  });
export default axios;

前端vue路由权限

访问后端接口的权限问题解决了,但是在vue中我不同的页面有不同的访问权限该如何处理?在需要权限的路由添加meta信息,表明该路由需要登录才能访问,然后在所有路由跳转之前添加处理函数,如果没有auth,跳转到登录:

{ 
	path:'/admin/home', 
	name:'admin', 
	component:Admin,
	meta:{
		requireAuth:true // 需要登录才能访问
	},
	children:[
	  { 
		  path:'/admin/add', 
		  component:ArticleAdd, 
		  mata:{
			requireAuth:true
		  } 
	  }
	]
}

总结

以上就是本博客的后台登录校验的源码实例。至于后台动态加载管理菜单的功能,后续继续更新~~

作者: 一蓑烟雨

本文版权归作者所有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

分类: Vue.js
posted 阅读(10 ) 评论(0 )

评论内容: